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#id 
.Class 


element 
.Class.class 


:first 
:last 
:even 


:odd 
:eqd(index) 


:gt(no) 

:lt(no) 
:not(se/ector) 
:header 
:animated 
:contains(text) 
:empty 
:hidden 
:visible 
S1,S2,S3 
[attributel] 
[attribute=valuel] 


[attribute!l=value] 


[attribute$=valuel] 


实例 


(™) 
$("#lastname") 
$(".intro") 

$('p") 
$(".intro.demo") 


$("p:first") 

$("p:last") 

$("tr:even") 
( 


$("tri:odd") 
$("ul liieq(3)") 


"ul li:gt(3)") 
"ulit(3)") 


":header") 


$(":contains('W3School')") 


$(":empty") 
$("p:hidden") 


"table:visible") 


"[href]") 
"[href=#'"]") 


( 

( 
$("th,td,.intro") 

( 

( 

("[hrefl="#"]") 


$ 


$("[href$=".jpg"]") 


input:not(:empty)") 


选取 
所 有 元 素 
id="lastname" 的 元 素 
所 有 class="intro" 的 元 素 
所 有 <p> 元 素 


所 有 class="intro" 且 class="demo" 


的 元 素 

第 一 个 <p> 元 素 

最 后 一 个 <p> 元 素 

所 有 偶数 <tr> 元 素 

所 有 奇数 <tr> 元 素 
列表 中 的 第 四 个 元 素 (index 从 0 开 


始 


列 出 index 大 于 3 的 元 素 

列 出 index 小 于 3 的 元 素 

所 有 不 为 空 的 input 元 素 

所 有 标题 元 素 <h1> - <h6> 

所 有 动画 元 素 

包含 指定 字符 串 的 所 有 元 素 

无 子 (元 素 ) 节点 的 所 有 元 素 

所 有 隐藏 的 <p> 元 素 

所 有 可 见 的 表格 

所 有 带 有 匹配 选择 的 元 素 

所 有 带 有 href 属性 的 元 素 

所 有 href 属性 的 值 等 于 "#" 的 元 素 
所 有 href 属性 的 值 不 等 于 "#" 的 元 素 


所 有 href 属性 的 值 包含 以 ".jpg" 结尾 
的 元 素 


:Input 


:text 
:password 
:radio 
:Checkbox 


:Submit 
:reset 
:button 
:Image 
:file 
:enabled 
:disabled 
:selected 


:checked 


$(":input") 
$(":text") 


$(":password") 
$(":radio") 


$(":checkbox") 


教程 : jQuery 元 素 选 择 器 语法 


所 有 <input> 元 素 
所 有 type="text" 的 <input> 元 素 
所 有 type="password" 的 <input> 元 


所 有 type="radio" 的 <input> 元 素 
所 有 type="checkbox" 的 <input> 元 


所 有 type="submit" 的 <input> 元 素 
所 有 type="reset" 的 <input> 元 素 
所 有 type="button" 的 <input> 元 素 
所 有 type="image" 的 <input> 元 素 
所 有 type="file" 的 <input> 元 素 
所 有 激活 的 input 元 素 

所 有 禁用 的 input 元 素 

所 有 被 选取 的 input 元 素 

所 有 被 选中 的 input 元 素 
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jQuery 事件 方法 


事件 方法 会 触发 匹配 元 素 的 事件 ， 或 将 函数 绑 定 到 所 有 匹配 元 素 的 某 个 事件 。 
触发 实例 : 


$("button#demo").click() 


上 面 的 例子 将 触发 id="demo" 的 button 元 素 的 click 事件 。 
绑 定 实例 : 


$("button#demo").click(function(){$("img").hide()}) 


上 面 的 例子 会 在 点 击 id="demo" 的 按钮 时 隐藏 所 有 图 像 。 





方法 描述 
bind() 向 匹配 元 素 附加 一 个 或 更 多 事件 处 理 器 
blur() 触发 、 或 将 函 数 绑 定 到 指定 元 素 的 blur 事件 
change() 触发 、 或 将 画 数 绑 定 到 指定 元 素 的 change 事件 
click() 触发 、 或 将 画 数 绑 定 到 指定 元 素 的 click 事件 
dblclick() 触发 、 或 将 画 数 绑 定 到 指定 元 素 的 double click 事件 
Gea 局 
die() 移 除 所 有 通过 live() 函数 添加 的 事件 处 理 程 序 。 
error() 触发 、 或 将 函数 绑 定 到 指定 元 素 的 error 事件 
event.isDefaultPrevented() ”返回 event 对 象 上 是 否 调 用 了 event.preventDefault()。 
event.pageX 相对 于 文档 左边 缘 的 鼠标 位 置 。 
event.pageY 相对 于 文档 上 边缘 的 鼠标 位 置 。 
event.preventDefault() 阻止 事件 的 默认 动作 。 
event.result 包含 由 被 指定 事件 触发 的 事件 处 理 器 返回 的 最 后 一 个 值 。 
event.target 触发 该 事件 的 DOM 元 素 。 


event.timeStamp 该 属性 返回 从 1970 年 1 月 1 日 到 事件 发 生 时 的 毫秒 数 。 


event.type 
event.which 
focus() 
keydown() 
keypress() 
keyup() 
live() 

load() 


mousedown( 


— 


mouseenter( 


— 


mouseleave 


( 
( 


| ~ 


mousemove 
mouseout() 
mouseover() 


mouseup() 


one() 


( 
scroll() 
select() 


submit() 
toggle() 


trigger() 
triggerHandler() 
unbind() 
undelegate() 


unload() 


参阅 


教程 : jQuery 元 素 选 择 器 语法 


描述 事件 的 类 型 。 
指示 按 了 哪个 键 或 按钮 。 
触发 、 或 将 范 数 绑 定 到 指定 元 素 的 focus 事件 


触发 、 或 将 函数 绑 定 到 指定 元 素 的 key down 事件 
触发 、 或 将 函数 绑 定 到 指定 元 素 的 key press 事件 





触发 、 或 将 函数 绑 定 到 指定 元 素 的 key up 事件 
为 当前 或 未 来 的 匹配 元 素 添 加 一 个 或 多 个 事件 义理 器 





触发 、 或 将 画 数 绑 定 到 指定 元 素 的 load 事件 

触发 、 或 将 画 数 绑 定 到 指定 元 素 的 mouse down 事件 
触发 、 或 将 函数 绑 定 到 指定 元 素 的 mouse enter 事件 
触发 、 或 将 画 数 绑 定 到 指定 元 素 的 mouse leave 事件 
触发 、 或 将 函数 绑 定 到 指定 元 素 的 mouse move 事件 
触发 、 或 将 画 数 绑 定 到 指定 元 素 的 mouse out 事件 
触发 、 或 将 函数 绑 定 到 指定 元 素 的 mouse over 事件 
触发 、 或 将 函数 绑 定 到 指定 元 素 的 mouse up 事件 
a 添加 事件 处 理 器 。 每 个 元 素 只 能 触发 一 次 该 处 


文档 就 绪 事 件 ( 当 HTML 文档 就 绪 可 用 时 ) 
触发 、 或 将 画 数 绑 定 到 指定 元 素 的 resize 事件 
触发 、 或 将 画 数 绑 定 到 指定 元 素 的 scroll 事件 
触发 、 或 将 函数 绑 定 到 指定 元 素 的 select 事件 
触发 、 或 将 函数 绑 定 到 指定 元 素 的 submit 事件 


绑 定 两 个 或 多 个 事件 义理 器 函数 ， 当 发 生 轮 流 的 click 事件 
时 执行 。 


所 有 匹配 元 素 的 指定 事件 

第 一 个 被 匹配 元 素 的 指定 事件 

从 匹配 元 素 移 除 一 个 被 添加 的 事件 处 理 器 

从 匹配 元 素 移 除 一 个 被 添加 的 事件 处 理 器 ， 现 在 或 将 来 
触发 、 或 将 范 数 绑 定 到 指定 元 素 的 unload 事件 
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jQuery 事件 - bind() 方法 
实例 


当 点 击 鼠 标 时 ， 隐 藏 或 显示 p 元 素 : 


$("button").bind("click",function(){ 
$("p").slideToggle( ); 


了 


定义 和 用 法 

bind() 方法 为 被 选 元 素 添 加 一 个 或 多 个 事件 义理 程序 ， 并 规定 事件 发 生 时 运行 的 函数 。 
将 事件 和 函数 绑 定 到 元 素 

规定 向 被 选 元 素 添 加 的 一 个 或 多 个 事件 义理 程序 ， 以 及 当 事 件 发 生 时 运行 的 函数 。 
语法 


$(_selector_).bind(_event_,_data ,_function ) 





参数 描述 


bvent ”必需 。 规 定 添加 到 元 素 的 一 个 或 多 个 事件 。 由 空格 分 隔 多 个 事件 。 必 须 是 有 效 
的 事件 。 


data 可 选 。 规 定 传递 到 函数 的 额外 数据 。 
function 必需。 规定 当 事 件 发 生 时 运行 的 函数 。 


蔡 代 话 法 


$(_selector_).bind({_event_:_function , _event_:_function , ...}) 
参数 描述 
{event:function, 必需 。 规 定 事件 映射 ， 其 中 包含 一 个 或 多 个 添加 到 元 素 的 事 


event:function, ...} 件 ， 以 及 当 事 件 发 生 时 运行 的 函数 。 


jQuery 事件 - blur() 方法 


实例 
当 输 入 域 失 去 焦点 (blur) 时 改变 其 颜色 : 


$("input").blur(function(){ 
$("input").css("background-color","#D6D6FF"); 
); 


定义 和 用 法 
当 元 素 失 去 焦点 时 发 生 blur 事件 。 


blur() 函数 触发 blur 事件 ， 或 者 如 果 设 置 了 function 参数 ， 该 画 数 也 可 规定 当 发 生 blur 事件 
时 执行 的 代码 。 


提示 : 早 前 ，blur 事件 仅 发 生 于 表单 元 素 上 。 在 新 浏览 器 中 ， 该 事件 可 用 于 任何 元 素 。 


触发 blur 事件 


触发 被 选 元 素 的 blur 事件 。 
语法 


$(_selector_).blur() 


将 范 数 绑 定 到 blur 事件 
规定 当 被 选 元 素 的 blur 事件 发 生 时 运行 的 函数 。 
语法 

$(_selector_).blur(_function_) 


参数 描述 
function 可 选 。 规 定 当 blur 事件 发 生 时 运行 的 辑 数 。 
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jQuery 事件 - change() 方法 


实例 
当 输 入 域 发 生变 化 时 改变 其 颜色 : 


$(".field").change(function(){ 
$(this).css("background-color", "#FFFFCC"); 
); 


二 、 : 

当 元 素 的 值 发 生 改变 时 ， 会 发 生 change 事件 。 

该 事件 仅 适用 于 文本 域 (text field) ， 以 及 textarea 和 select 元 素 。 
change() 函数 触发 change 事件 ， 或 规定 当 发 生 change 事件 时 运行 的 函数 。 


注释 : 当 用 于 select 元 素 时 ，change 事件 会 在 选择 某 个 选项 时 发 生 。 当 用 于 text field 或 text 
area 时 ， 该 事件 会 在 元 素 失 去 焦点 时 发 生 。 


触发 change 事件 
触发 被 选 元 素 的 change 事件 。 
语法 


$(_selector_) ,change() 


将 函数 绑 定 到 change 事件 
规定 当 被 选 元 素 的 change 事件 发 生 时 运行 的 函数 。 
语法 


$(_selector_).change(_function_ ) 
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参数 描述 
function 可 选 。 规 定 当 change 事件 发 生 时 运行 的 函数 。 
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jQuery 事件 - click() 方法 


实例 
当 点 击 按钮 时 ， 隐 藏 或 显示 元 素 : 


$("button").click(function(){ 
$("p").slideToggle(); 
); 


定义 和 用 法 

当 点 击 元 素 时 ， 会 发 生 click 事件 。 

当 鼠 标 指针 停留 在 元 素 上 方 ， 然 后 按 下 并 松 开 鼠 标 左 键 时 ， 就 会 发 生 一 次 click。 
click() 方法 触发 click 事件 ， 或 规定 当 发 生 click 事件 时 运行 的 函数 。 


触发 click 事件 
语法 


$(_selector_) .click() 


将 函数 绑 定 到 click 事件 


$(_SseJlector_).click(_function_) 


参数 


function 可 选 。 规 定 当 发 生 click 事件 时 运行 的 函数 。 


慌 
党 


jQuery 事件 - dblclick() 方法 
例 


当 双 击 按钮 时 ， 隐 藏 或 显示 元 素 : 


将 


$("button").dblclick(function(){ 
$("p").slideToggle(); 


定义 和 用 法 

当 双 击 元 素 时 ， 会 发 生 dblclick 事件 。 

当 鼠 标 指针 停留 在 元 素 上 方 ， 然 后 按 下 并 松 开 鼠 标 左 键 时 ， 就 会 发 生 一 次 click。 
在 很 短 的 时 间 内 发 生 两 次 click， 即 是 一 次 double click 事件 。 

dblclick() 方法 触发 dblclick 事件 ， 或 规定 当 发 生 dblclick 事件 时 运行 的 函数 。 


提示 : 如 果 把 dblclick 和 click 事件 应 用 于 同一 元 素 ， 可 能 会 产生 问题 。 


触发 dblclick 事件 
语法 
$(_selector_).dblclick() 
将 函数 绑 定 到 dblclick 事件 


语法 


$(_selector_).dblclick(_function_ ) 


洁 


参数 描 
function 可 选 。 规 定 当 发 生 dblclick 事件 时 运行 的 函数 。 


jQuery 事件 - delegate() 方法 


A 
实例 
当 点 击 妃 标 时 ， 隐 藏 或 显示 p 元 素 : 


$("div").delegate("button", "click",function(){ 
$("p").slideToggle( ); 
); 


定义 和 用 法 
delegate() 方法 为 指定 的 元 素 (属于 被 选 元 素 的 子 元 素 ) 添加 一 个 或 多 个 事件 处 理 程序 ， 并 规 
定 当 这 些 事件 发 生 时 运行 的 函数 。 


使 用 delegate() 方法 的 事件 处 理 程序 适用 于 当前 或 未 来 的 元 素 (上 比如 由 脚本 创建 的 新 元 
素 ) 。 


语法 





$(_selector_).delegate(_childSelector_ ，event_ ,_data ,_function_ ) 


参数 描述 
childSelector ”必需 。 规 定 要 附加 事件 处理 程 序 的 一 个 或 多 个 子 元 素 。 


a 必需 。 规 定 附 加 到 元 素 的 一 个 或 多 个 事件 。 由 空格 分 隔 多 个 事件 值 。 必 
须 是 有 效 的 事件 。 





data 可 选 。 规 定 传递 到 函数 的 额外 数据 。 
function 必需 。 规 定 当 事件 发 生 时 运行 的 画 数 。 


亲 目 试 一 试 - 实例 


向 未 来 的 元 素 添加 事件 处 理 程序 
如 何 使 用 delegate() 方法 向 尚未 创建 的 元 素 添加 事件 处 理 程序 。 


jQuery 事件 - die() 方法 


实例 
移 除 所 有 通过 live() 方法 向 p 元 素 添加 的 事件 处 理 程序 : 


$("p") .die(); 
定义 和 用 法 
die() 方法 移 除 所 有 通过 live() 方法 向 指定 元 素 添加 的 一 个 或 多 个 事件 处 理 程序 。 


语法 


$(_selector_).die(_event_,_function_ ) 





参数 描述 
ed 必需 。 规 定 要 移 除 的 一 个 或 多 个 事件 处 理 程序 。 由 空格 分 隔 多 个 事件 值 。 必 须 
是 有 效 的 事件 。 


function ”可 选 。 规 定 要 移 除 的 特定 函数 。 


亲自 试 一 试 - 实例 
移 除 通过 live() 添加 的 特定 函数 


如 何 使 用 live() 方法 移 除 事件 处 理 程序 的 特定 函数 。 


jQuery 事件 - error() 方法 


实例 
如 果 图 像 不 存在 ， 则 用 一 段 预 定义 的 文本 取代 它 : 


$("img").error(function(){ 
$("img").replacewith(" 


Missing image! 


0) 
}); 


定义 和 用 法 
当 元 素 遇 到 错误 (没有 正确 载 入 ) 时 ， 发 生 error 事件 。 
error() 方法 触发 error 事件 ， 或 规定 当 发 生 error 事件 时 运行 的 画 数 。 


提示 : 该 方法 是 bind(error, handler) 的 简写 方式 。 


触发 error 事件 
语法 


$(_selector_).error() 


将 函数 绑 定 到 error 事件 


$(_selector_).error(_function_ ) 


参数 


function 可 选 。 规 定 当 发 生 error 事件 时 运行 的 辑 数 。 


慌 
学 


jQuery 事件 -isDefaultPrevented() 方法 


实例 
防止 链接 打开 URL， 并 声明 来 自 isDefaultPrevented() 的 结果 : 


$("a").click(function(event){ 
event.preventDefault(); 
alert("Default prevented: " + event.isDefaultPrevented()); 


}); 
1 ~ N 
isDefaultPrevented() 方法 返回 指定 的 event 对 象 上 是 否 调用 了 preventDefault() 方法 。 
语法 

_event_.isDefaultPrevented() 


参数 描述 
event 必需 。 规 定 需要 检查 的 事件 。 这 个 event 参数 来 自 事件 绑 定 函数 。 


jQuery 事件 - pageX 属性 
例 


显示 鼠标 指针 的 位 置 : 


将 


$(document ) .mousemove(function(e){ 
$("span").text("X: " + e.pageX + ", Y: " + e.pageY); 


定义 和 用 法 
pageX() 属性 是 鼠标 指针 的 位 置 ， 相 对 于 文档 的 左边 缘 。 
语法 


_event_ ,pageX 


参数 描述 
event 必需 。 规 定 要 使 用 的 事件 。 这 个 event 参数 来 自 事件 绑 定 函数 。 


jQuery 事件 - pageY 属性 
例 


显示 鼠标 指针 的 位 置 : 


将 


$(document ) .mousemove(function(e){ 
$("span").text("X: " + e.pageX + ", Y: " + e.pageY); 


定义 和 用 法 
pageY() 属性 是 鼠标 指针 的 位 置 ， 相 对 于 文档 的 上 边缘 。 
语法 


_event_ .pageY 


参数 描述 
event 必需 。 规 定 要 使 用 的 事件 。 这 个 event 参数 来 自 事件 绑 定 函数 。 


jQuery 事件 - preventDefault() 方法 


实例 
防止 链接 打开 URL : 


$("a").click(function(event){ 
event .preventDefault(); 


}); 


定义 和 用 法 


preventDefault() 方法 阻止 元 素 发 生 默认 的 行为 (例如 ， 当 点 击 提交 按钮 时 阻止 对 表单 的 提 


中 
湾 
避 
洁 


jQuery 事件 - result 属性 


显示 最 后 一 次 点 击 事件 返回 的 结果 : 


$("button").click(function(e) { 
$("p").html(e.result); 
); 


定义 和 用 法 


result 属性 包含 由 被 指定 事件 触发 的 事件 处 理 器 返回 的 最 后 一 个 值 ， 除 非 这 个 值 未 定义 。 


参数 描述 


ee 


必需 。 规 定 返 回 的 最 后 一 个 值 来 自 哪 个 事件 。 这 个 event 参数 来 自 事件 绑 定 函 


jQuery 事件 - target 属性 


实例 
显示 哪 个 DOM 元 素 触发 了 事件 : 


$("p, button, hi, h2").click(function(event){ 
$("div").html("Triggered by a " + event.target.nodeName + " element."); 


}); 
ch 、 : 
target 属性 规定 哪个 DOM 元 素 触发 了 该 事件 。 
语法 

_event_.target 


参数 描述 
event 必需 。 规 定 需要 检查 的 事件 。 这 个 event 参数 来 自 事件 绑 定 函数 。 


jQuery 事件 - timeStamp 属性 


实例 
显示 出 当 对 按钮 元 素 的 点 击 事件 发 生 时 的 时 间 惟 : 


$("button").click(function(event){ 
$("span")html(event.timeStamp); 
); 


定义 和 用 法 
timeStamp 属性 包含 从 1970 年 1 月 1 日 到 事件 被 触发 时 的 毫秒 数 。 
语法 


_event_.timeStamp 


参数 描述 
event 必需 。 规 定 返 回 该 时 间 稚 的 事件 。 这 个 event 参数 来 自 事件 绑 定 函数 。 


jQuery 事件 - type 属性 


实例 
显示 触发 了 哪 种 关 型 的 事件 : 


$("p").bind('click dblclick mouseover mouseout',function(event){ 
$("div").html("Event: ”+ event.type); 


定义 和 用 法 
type 属性 描述 触发 哪 种 事件 类 型 。 
语法 


_event_ .type 


参数 描述 
event 必需 。 规 定 要 检查 的 事件 。 这 个 event 参数 来 自 事 件 绑 定 本 数 。 


jQuery 事件 - which 属性 


实例 
显示 按 了 哪个 键 : 


$("input").keydown(function(event){ 
$("div").html("Key: " + event.which); 
}); 


-~ N 
which 属性 指示 按 了 哪个 键 或 按钮 。 
语法 

_event_ ,which 


参数 描述 
event 必需 。 规 定 要 检查 的 事件 。 这 个 event 参数 来 自 事 件 绑 定 本 数 。 


jQuery 事件 - focus() 方法 


实例 
当 输入 框 获得 焦点 时 ， 改 变 它 的 背景 


$("input").focus(function(){ 
$("input").css("background-color", "#FFFFCC"); 


定义 和 用 法 


当 元 素 获 得 焦点 点 时 ， 发 生 focus 事件 。 
当 通 过 鼠标 点 击 选中 元 素 或 通过 tab 键 定 位 到 元 素 时 ， 该 元 素 就 会 获得 焦点 


focus() 方法 触发 focus 事件 ， 或 规定 当 发 生 focus 事件 时 运行 的 函数 。 


触发 focus 事件 
语法 
$(_selector_) .focus() 
将 函数 绑 定 到 focus 事件 


语法 


$(_selector_).focus(_function_ ) 


一 
己 2 


参数 描述 
function 可 选 。 规 定 当 发 生 focus 事件 时 运行 的 函数 。 


jQuery 事件 - keydown() 方法 


实例 
当 按 下 按键 时 ， 改 变 文本 域 的 颜色 : 


$("input").keydown(function(){ 
$("input").css("background-color", "#FFFFCC"); 
); 


定义 和 用 法 

完整 的 key press 过 程 分 为 两 个 部 分 : 1. 按键 被 按 下 ; 2. 按键 被 松 开 。 

当 按钮 被 按 下 时 ， 发 生 keydown 事件 。 

keydown() 方法 触发 keydown 事件 ， 或 规定 当 发 生 keydown 事件 时 运行 的 函数 。 
注释 : 如 果 在 文档 元 素 上 进行 设置 ， 则 无 论 元 素 是 否 获得 焦点 ， 该 事件 都 会 发 生 。 


提示 : 请 使 用 .which 属性 来 确定 按 下 了 哪个 按键 ( 亲 目 试 一 试 ) 。 


触发 keydown 事件 
语法 
和 
将 函数 绑 定 到 keydown 事件 
语法 
ee 


参数 描述 
function 可 选 。 规 定 当 发 生 keydown 事件 时 运行 的 函数 。 


jQuery 事件 - keypress() 方法 


实例 
计算 在 输入 域 中 的 按键 次 数 : 


$("input").keydown(function(){ 
$("span").text(i+=1); 
); 


定义 和 用 法 


keypress 事件 与 keydown 事件 类 似 。 当 按钮 被 按 下 时 ， 会 发 生 该 事件 。 它 发 生 在 当前 获得 焦 
点 的 元 素 上 。 


不 过 ， 与 keydown 事件 不 同 ， 每 插入 一 个 字符 ， 就 会 发 生 keypress 事件 。 
keypress() 方法 触发 keypress 事件 ， 或 规定 当 发 生 keypress 事件 时 运行 的 函数 。 


注释 : 如 果 在 文档 元 素 上 进行 设置 ， 则 无 论 元 素 是 否 获得 焦点 ， 该 事件 都 会 发 生 。 


触发 keypress 事件 
语法 


$(_selector_).keypress() 


将 函数 绑 定 到 keypress 事件 


参数 描述 
function 可 选 。 规 定 当 发 生 keypress 事件 时 运行 的 函数 。 


jQuery 事件 - keyup() 方法 


实例 
当 按 下 按键 时 ， 改 变 文本 域 的 颜色 : 


$("input").keyup(function(){ 
$("input").css("background-color","#D6D6FF"); 
); 


二 、 > 
完整 的 key press 过 程 分 为 两 个 部 分 ， 按 键 被 按 下 ， 然 后 按键 被 松 开 并 复位 。 
当 按 钮 被 松 开 时 ， 发 生 keyup 事件 。 它 发 生 在 当前 获得 焦点 的 元 素 上 。 
keyup() 方法 触发 keyup 事件 ， 或 规定 当 发 生 keyup 事件 时 运行 的 函数 。 


注释 : 如 果 在 文档 元 素 上 进行 设置 ， 则 无 论 元 素 是 否 获得 焦点 ， 该 事件 都 会 发 生 。 


提示 : 请 使 用 .which 属性 来 确定 按 下 了 哪个 按键 (亲自 试 一 试 ) 。 
触发 keyup 事件 
语法 
$(_selector_).keyup() 
将 函数 绑 定 到 keyup 事件 
语法 
$(_selector_).keyup(_function_) 


参数 描 
function 可 选 。 规 定 当 发 生 keyup 事件 时 运行 的 辑 数 。 


党 


jQuery 事件 - live() 方法 
实例 


当 点 击 按钮 时 ， 隐 藏 或 显示 p 元 素 : 


$("button").1live("click",function(){ 
$("p").slideToggle(); 
); 


定义 和 用 法 
live() 方法 为 被 选 元 素 附 加 一 个 或 多 个 事件 处 理 程序 ， 并 规定 当 这 些 事件 发 生 时 运行 的 函数 。 


通过 live() 方法 附加 的 事件 处 理 程序 适用 于 匹配 选择 器 的 当前 及 未 来 的 元 素 (比如 由 脚本 创建 
的 新 元 素 ) 。 


语法 





$(_selector_).live(_event_ ,_data ,_function ) 


参数 描述 

a 必需 。 规 定 附加 到 元 素 的 一 个 或 多 个 事件 。 由 空格 分 隔 多 个 事件 。 必 须 是 有 效 
的 Lo] 

data 可 选 。 规定 传 递 到 该 范 数 的 额外 数据 。 

function 必需。 规定 当 事 件 发 生 时 运行 的 函数 。 


亲自 试 一 试 - 实例 
向 未 来 的 元 素 添 加 事件 义理 器 
如 何 使 用 live() 方法 向 尚未 创建 的 元 素 添加 事件 处 理 器 。 


jQuery 事件 - load() 方法 


实例 
当 图 像 加 载 时 ， 改 变 div 元 素 的 文本 : 


$("img").Joad(function(){ 
$("div").text("Image loaded"); 
}); 


定义 和 用 法 

当 指 定 的 元 素 (及 子 元 素 ) 已 加 载 时 ， 会 发 生 load() 事件 。 

该 事件 适用 于 任何 带 有 URL 的 元 素 (比如 图 像 、 脚 本 、 框 架 、 内 联 框架 ) 。 

根据 不 同 的 浏览 器 (Firefox 和 IE) ， 如 果 图 像 已 被 缓存 ， 则 也 许 不 会 触发 load 事件 。 
注释 : 还 存在 一 个 名 为 load() 的 jQuery Ajax 方法 ， 根 据 不 同 的 参数 而 定 。 

语法 


$(_selector_).load(_function_ ) 


参数 描述 


function 必需 。 规 定 当 指定 元 素 加 载 完 成 时 运行 的 函数 。 


jQuery 事件 - mousedown() 方法 


> 
实例 
当 按 下 鼠标 按钮 时 ， 隐 藏 或 显示 元 素 : 


$("button") ,mousedown(function( ){ 
$("p").slideToggle(); 


1 、 S 
当 鼠 标 指针 移动 到 元 素 上 方 ， 并 按 下 鼠标 按键 时 ， 会 发 生 mousedown 事件 。 
与 click 事件 不 同 ，mousedown 事件 仅 需 要 按键 被 按 下 ， 而 不 需要 松 开 即 可 发 生 。 


mousedown() 方法 触发 mousedown 事件 ， 或 规定 当 发 生 mousedown 事件 时 运行 的 画 数 。 


触发 mousedown 事件 
语法 


$(_selector_).mousedown() 


闻 男 数 绑 定 到 mousedown 事件 


$(_selector_).mousedown(_function_) 


参数 描述 
function 可 选 。 规 定 当 发 生 mousedown 事件 时 运行 的 函数 。 


jQuery 事件 - mouseenter() 方法 


实例 
当 电 标 指针 进入 《 穿 过 ) 元 素 时 ， 改 变 元 素 的 背景 


$("p") .mouseenter(function(){ 
$("p").css("background-color", "yellow"); 


二 、 : 
当 鼠 标 指针 穿 过 元 素 时 ， 会 发 生 mouseenter 事件 。 
该 事件 大 多 数 时 候 会 与 mouseleave 事件 一 起 使 用 。 
mouseenter() 方法 触发 mouseenter 事件 ， 或 规定 当 发 生 mouseenter 事件 时 运行 的 函数 。 


注释 : 与 mouseover 事件 不 同 ， 只 有 在 鼠标 指针 穿 过 被 选 元 素 时 ， 才 会 触发 mouseenter 事 
件 。 如 果 鼠 标 指针 穿 过 任何 子 元 素 ， 同 样 会 触发 mouseover 事件 。 请 看 下 面 例子 的 演示 。 


亲自 试 一 试 : mouseenter 与 mouseover 的 不 同 


触发 mouseenter 事件 
语法 
人 
将 函数 绑 定 到 mouseenter 事件 
语法 
和 


参数 描述 
function 可 选 。 规 定 当 发 生 mouseenter 事件 时 运行 的 函数 。 


jQuery 事件 - mouseleave() 方法 


实例 
当 电 标 指针 离开 元 素 时 ， 改 变 元 素 的 背景 


$("p").mouseleave(function(){ 
$("p").css("background-color","#E9E9E4"); 


二 、 : 
当 妃 标 指针 离开 元 素 时 ， 会 发 生 mouseleave 事件 。 
该 事件 大 多 数 时 候 会 与 mouseenter 事件 一 起 使 用 。 
mouseleave() 方法 触发 mouseleave 事件 ， 或 规定 当 发 生 mouseleave 事件 时 运行 的 函数 。 


注释 : 与 mouseout 事件 不 同 ， 只 有 在 鼠标 指针 离开 被 选 元 素 时 ， 才 会 触发 mouseleave 事 
件 。 如 果 鼠 标 指针 离开 任何 子 元 素 ， 同 样 会 触发 mouseout 事件 。 请 看 下 面 例子 的 演示 。 


亲自 试 一 试 : mouseleave 与 mouseout 的 不 同 


触发 mouseleave 事件 
语法 
和 
将 函数 绑 定 到 mouseleave 事件 
语法 
Re ee 


参数 描述 


function 可 选 。 规 定 当 发 生 mouseleave 事件 时 运行 的 函数 。 


jQuery 事件 - mousemovel() 方法 


获得 鼠标 指针 在 页 面 中 的 位 置 : 


$(document ) ,mousemove(function(e){ 
$("span").text(e.pageX + ", " + e.pageY); 
); 


定义 和 用 法 
当 鼠 标 指针 在 指定 的 元 素 中 移动 时 ， 就 会 发 生 mousemove 事件 。 


mousemove() 方法 触发 mousemove 事件 ， 或 规定 当 发 生 mousemove 事件 时 运行 的 辑 数 。 


注意 : 用 户 把 鼠标 移动 一 个 像素 ， 就 会 发 生 一 次 mousemove 事件 。 人 处理 所 有 mousemove 
事件 会 耗费 系统 资源 。 请 说 愤 使 用 该 事件 。 


触发 mousemove 事件 
语法 
es 
将 函数 绑 定 到 mousemove 事件 
语法 
i 


参数 描述 


function 可 选 。 规 定 当 发 生 mousemove 事件 时 运行 的 函数 。 


jQuery 事件 - mouseout() 方法 


实例 
当 最 标 从 元 素 上 移 开 时 ， 改 地 元 素 的 背景 


$("p").mouseout(function(){ 
$("p").css("background-color","#E9E9E4"); 


号- 、 N 

当 鼠 标 指针 从 元 素 上 移 开 时 ， 发 生 mouseout 事件 。 

该 事件 大 多 数 时 候 会 与 mouseover 事件 一 起 使 用 。 

mouseout() 方法 触发 mouseout 事件 ， 或 规定 当 发 生 mouseout 事件 时 运行 的 函数 。 


注释 : 与 mouseleave 事件 不 同 ， 不 论 鼠 标 指针 离开 被 选 元 素 还 是 任何 子 元 素 ， 都 会 触发 
mouseout 事件 。 只 有 在 鼠标 指针 离开 被 选 元 素 时 ， 才 会 触发 mouseleave 事件 。 请 看 下 面 例 


亲自 试 一 试 : mouseleave 与 mouseout 的 不 同 


触发 mouseout 事件 
语法 
人 
将 函数 绑 定 到 mouseout 事件 
语法 
ee 


参数 描述 
function 可 选 。 规 定 当 发 生 mouseout 事件 时 运行 的 函数 。 
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jQuery 事件 - mouseover() 方法 


实例 
当 电 标 指针 位 于 元 素 上 方 时 时 ， 改 变 元 素 的 背景 


$("p").mouseover(function(){ 
$("p").css("background-color","yellow"); 


二 、 : 

当 鼠 标 指针 位 于 元 素 上 方 时 ， 会 发 生 mouseover 事件 。 

该 事件 大 多 数 时 候 会 与 mouseout 事件 一 起 使 用 。 

mouseover() 方法 触发 mouseover 事件 ， 或 规定 当 发 生 mouseover 事件 时 运行 的 画 数 。 


注释 : 与 mouseenter 事件 不 同 ， 不 论 鼠 标 指针 穿 过 被 选 元 素 或 其 子 元 素 ， 都 会 触发 
mouseover 事件 。 只 有 在 鼠标 指针 穿 过 被 选 元 素 时 ， 才 会 触发 mouseenter 事件 。 请 看 下 面 
例子 的 演示 。 


亲自 试 一 试 : mouseenter 与 mouseover 的 不 同 


触发 mouseover 事件 
语法 
人 
将 画 数 绑 定 到 mouseover 事件 
语法 
ee 


参数 描述 
function 可 选 。 规 定 当 发 生 mouseover 事件 时 运行 的 函数 。 
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jQuery 事件 - mouseup() 方法 


A 
实例 
当 松 开 妃 标 按 钮 时 ， 隐 藏 或 显示 元 素 : 


$("button").mouseup(function(){ 
$("p").slideToggle(); 


定义 和 用 法 


当 在 元 素 上 放松 鼠标 按钮 时 ， 会 发 生 mouseup 事件 。 


与 click 事件 不 同 ，mouseup 事件 仅 需 要 放松 按钮 。 当 最 标 指针 位 于 元 素 上 方 时 ， 放 松鼠 标 按 


钮 就 会 触发 该 事件 。 


mouseup() 方法 触发 mouseup 事件 ， 或 规定 当 发 生 mouseup 事件 时 运行 的 函数 。 


触发 mouseup 事件 
语法 
人 
将 函数 绑 定 到 mouseup 事件 
语法 
a 


参数 


描述 


function 可 选 。 规 定 当 发 生 mouseup 事件 时 运行 的 函数 。 


jQuery 事件 - one() 方法 
实例 


当 点 击 p 元 素 时 ， 增 加 该 元 素 的 文本 大 小 : 


$("p").one("click", function(){ 
$(this).animate({fontSize:"+=6px"}); 


定义 和 用 法 
one() 方法 为 被 选 元 素 附加 一 个 或 多 个 事件 处 理 程序 ， 并 规定 当 事 件 发 生 时 运 
当 使 用 one() 方法 时 ， 每 个 元 素 只 冯 


于 的 函数 。 
行 一 次 事件 处 理 器 画 数 。 


语法 


$(_selector_).one(_event_,_data 





;_function_) 


参数 


描述 
Be 必需 。 规 定 添加 到 元 素 的 一 个 或 多 个 事件 。 由 空格 分 隔 多 个 事件 。 必 须 是 有 效 
的 事件 。 
data 可 选 。 规 定 传递 到 函数 的 额外 数据 。 
function 必需。 规定 当 事 件 发 生 时 运行 的 函数 。 


jQuery 事件 - ready() 方法 


实例 
在 文档 加 载 后 激活 国 数 : 


$(document).ready(function(){ 
$(".btn1i").click(function(){ 
$("p").slideToggle(); 
}); 


}); 


定义 和 用 法 


当 DOM (文档 对 象 模型 ) 已 经 加 载 ， 并 且 页 面 〈 包 括 图 像 ) 已 经 完全 呈现 时 ， 会 发 生 ready 
事件 。 


由 于 该 事件 在 文档 就 绪 后 发 生 ， 因 此 把 所 有 其 他 的 jQuery 事件 和 范 数 置 于 该 事件 中 是 非常 好 
的 做 法 。 正 如 上 面 的 例子 中 那样 。 


ready() 本 数 规定 当 ready 事件 发 生 时 执行 的 代码 。 
ready() 函数 仅 能 用 于 当前 文档 ， 因 此 无 需 选 择 器 。 
允许 使 用 以 下 三 种 语法 : 


语法 1 


$(document ) ,ready(_function_) 


语法 2 


$().ready(_function ) 


语法 3 


$(_function_) 


参数 描述 
function 必需 。 规 定 当 文档 加 载 后 要 运行 的 男 数 。 


提示 和 注释 


提示 : ready() 郴 数 不 应 与 <body onload=""> 一 起 使 用 。 


jQuery 事件 - resize() 方法 


实例 
对 浏览 器 窗口 调整 大 小 进行 计数 : 


$(window).resize(function() { 
$('span').text(x+=1); 
); 


1、 > 
当 调 整 浏览 器 窗口 的 大 小 时 ， 发 生 resize 事件 。 
resize() 方法 触发 resize 事件 ， 或 规定 当 发 生 resize 事件 时 运行 的 画 数 。 


触发 resize 事件 
语法 
和 
将 函数 绑 定 到 resize 事件 
语法 
a 


参数 描述 
function 可 选 。 规 定 当 发 生 resize 事件 时 运行 的 函数 。 


jQuery 事件 - scroll() 方法 


实例 
对 元 素 滚动 的 次 数 进行 计数 : 


$("div").scroll(function() { 
$("span").text(x+=1); 
); 


二 、 : 
当 用 户 滚动 指定 的 元 素 时 ， 会 发 生 scroll 事件 。 
scroll 事件 适用 于 所 有 可 滚动 的 元 素 和 window 对 象 (浏览 器 窗口 ) 。 


scroll() 方法 触发 scroll 事件 ， 或 规定 当 发 生 scroll 事件 时 运行 的 函数 。 


触发 scroll 事件 
语法 


$(_selector_).scroll() 


将 函数 绑 定 到 scroll 事件 


参数 摘 ; 
function 可 选 。 规 定 当 发 生 scroll 事件 时 运行 的 回 数 。 


学 


jQuery 事件 - select() 方法 


实例 
在 文本 域 后 添加 文本 ， 以 显示 出 提示 文本 : 


$("input").select(function(){ 
$("input").after(" Text marked!"); 
); 


定义 和 用 法 
当 textarea 或 文本 类 型 的 input 元 素 中 的 文本 被 选择 时 ， 会 发 生 select 事件 。 
select() 方法 触发 select 事件 ， 或 规定 当 发 生 select 事件 时 运行 的 汞 数 。 


触发 select 事件 
语法 


$(_selector_).select() 
将 函数 绑 定 到 select 事件 
语法 

$(_selector_).select(_function ) 


参数 摘 ; 
function 可 选 。 规 定 当 发 生 select 事件 时 运行 的 函数 。 


渤 


jQuery 事件 - submit() 方法 


$("form").submit(function(e){ 
alert("Submitted"); 
}); 


定义 和 用 法 

当 提交 表单 时 ， 会 发 生 submit 事件 。 

该 事件 只 适用 于 表单 元 素 。 

submit() 方法 触发 submit 事件 ， 或 规定 当 发 生 submit 事件 时 运行 的 函数 。 


触发 submit 事件 
语法 
$(_selector_) ,submit() 
将 西数 绑 定 到 submit 事件 


语法 


$(_SseJlector_) ,Submit(_function_) 


参数 描述 
function 可 选 。 规 定 当 发 生 submit 事件 时 运行 的 函数 。 


亲 目 试 一 试 - 实例 


阻止 提交 按钮 的 默认 action 


使 用 preventDefault() 函数 来 阻止 对 表单 的 提交 。 


jQuery 事件 - toggle() 方法 


实例 
切换 不 同 的 背景 


$("p").toggle( 

function(){ 
$("body").css("background-color", "green");}, 
function(){ 
$("body").css("background-color", "red");}, 
function(){ 
$("body").css("background-color", "yellow");} 


定义 和 用 法 
toggle() 方法 用 于 绑 定 两 个 或 多 个 事件 处 理 器 画 数 ， 以 响应 被 选 元 素 的 轮流 的 click 事件 。 
该 方法 也 可 用 于 切换 被 选 元 素 的 hide() 与 show() 方法 。 


向 Toggle 事件 绑 定 两 个 或 更 多 加 数 
当 指 定 元 素 被 点 击 时 ， 在 两 个 或 多 个 函数 之 间 轮 流 切 换 。 


如 果 规 定 了 两 个 以 上 的 函数 ， 则 toggle() 方法 将 切换 所 有 男 数 。 例 如 ， 如 果 存 在 三 个 函数 ， 
则 第 一 次 点 击 将 调用 第 一 个 函数 ， 第 二 次 点 击 调用 第 二 个 画 数 ， 第 三 次 点 击 调用 第 三 个 画 
数 。 第 四 次 点 击 再 次 调用 第 一 个 函数 ， 以 此 类 推 。 


语法 
$(_selector_).toggle(_function1() ,_function2()_,_functionN() ,...) 
参数 描述 
function1() 必需 。 规 定 当 元 素 在 每 偶数 次 被 点 击 时 要 运行 的 函数 。 
function2() 必需 。 规 定 当 元 素 在 每 奇数 次 被 点 击 时 要 运行 的 函数 。 
functionN!(),... 可 选 。 规 定 需 要 切换 的 其 他 函数 。 


切换 Hide() 和 Show() 


检查 每 个 元 素 是 否 可 见 。 


如 果 元 素 已 隐藏 ， 则 运行 show()。 如 果 元 素 可 见 ， 则 元 素 hide()。 这 样 就 可 以 创造 切换 效 
果 。 


语法 


$(_selector_).toggle(_speed ,_callback_ ) 


参数 描述 


可 选 。 规 定 hide/show 效果 的 速度 。 黑 认 是 "0"。 可 能 的 值 : 毫秒 (比如 
1500) "slow" "normal" "fast" 


callback ， 可 选 。 当 toggle() 方法 完成 时 执行 的 函数 。 如 需 学 习 更 多 有 关 callback 的 知 
识 ， 请 访问 我 们 的 Callback 函数 教程 。 


speed 


规定 是 否 只 显示 或 只 隐藏 所 有 匹配 的 元 素 。 


$(_selector_).toggle(_switch_ ) 


溯 


参数 描 ; 


必需 。 布尔 值 ， 规定 toggle() 是 否 应 只 显示 或 只 隐藏 所 有 被 选 元 素 。 ouen = 


switch 2 三 
显示 元 素 false - 隐藏 元 素 


jQuery 事件 - trigger() 方法 


实例 
触发 input 元 素 的 select 事件 : 


$("button").click(function(){ 
$("input").trigger("select"); 
); 


定义 和 用 法 
trigger() 方法 触发 被 选 元 素 的 指定 事件 类 型 。 


触发 事件 


规定 被 选 元 素 要 触发 的 事件 。 





语法 
$(_selector_).trigger(_event_,[_parami ,_param2 ,...]) 
参数 描述 
ee 必需 。 规 定 指定 元 素 要 触发 的 事件 。 可 以 使 自 定义 事件 (使 用 


bind() 函数 来 附加 ) ， 或 者 任何 标准 事件 。 


param1param2..] ， 避 汗 。 信 间 到 事件 欠 理 程序 的 领 外 参数 ， 领 外 的 参数 对 自 定 义 束 


使 用 Event 对 象 来 触发 事件 


规定 使 用 事件 对 象 的 被 选 元 素 要 触发 的 事件 。 
语法 


$(_selector_).trigger(_eventobj_) 
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参数 
eventObj 必需 。 


jQuery 事件 - trigger() 方法 


描述 
规定 事件 发 生 时 运行 的 图 数 。 
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jQuery 事件 - triggerHandler() 方法 


实例 
触发 input 元 素 的 select 事件 : 


$("button").click(function(){ 
$("input").triggerHandler("select"); 
); 


定义 和 用 法 

triggerHandler() 方法 触发 被 选 元 素 的 指定 事件 类 型 。 但 不 会 执行 浏览 器 默认 动作 ， 也 不 会 产 
生 事 件 冒 泡 。 

triggerHandler() 方法 与 trigger() 方法 类 似 。 不 同 的 是 它 不 会 触发 事件 (比如 表单 提交 ) 的 默 
认 行 为 ， 而 且 只 影响 第 一 个 匹配 元 素 。 

与 trigger() 方法 相 比 的 不 同 之 处 


。 它 不 会 引起 事件 (比如 表单 提交 ) 的 默认 行为 

。 .trigger() 会 操作 jQuery 对 象 匹配 的 所 有 元 素 ， 而 .triggerHandler() 只 影响 第 一 个 匹配 元 
素 。 

。 由 .triggerHandler() 创建 的 事件 不 会 在 DOM 树 中 冒 泡 ; 如 果 目 标 元 素 不 直接 处 理 它们 ， 
则 不 会 发 生 任何 事情 。 

。 该 方法 的 返回 的 是 事件 处 理 函 数 的 返回 值 ， 而 不 是 具有 可 链 性 的 jQuery 对 象 。 此 外 ， 如 
果 没 有 义理 程序 被 触发 ， 则 这 个 方法 返回 undefined。 


触发 事件 
规定 被 选 元 素 要 触发 的 事件 。 
语法 


$(_Sselector_),triggerHandler(_event_，[_param1 ， param2 ,...]) 
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参数 描述 
event 必需 。 规 定 指定 元 素 要 触发 的 事件 。 
[param1,param2,...] 可 选 。 传 递 到 事件 处 理 程序 的 额外 参数 。 


jQuery 事件 - triggerHandler() 方法 
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jQuery 事件 - unbind() 方法 


实例 
移 除 所 有 p 元 素 的 事件 处 理 器 : 


$("button").click(function(){ 
a 
定义 和 用 法 
unbind() 方法 移 除 被 选 元 素 的 事件 处 理 程序 。 
该 方法 能 够 移 除 所 有 的 或 被 选 的 事件 处 理 程序 ， 或 者 当 事 件 发 生 时 终止 指定 画 数 的 运行 。 
ubind() 适用 于 任何 通过 jQuery 附加 的 事件 处 理 程序 。 
取消 绑 定 元 磁 的 事件 处 理 程序 和 阔 数 


规定 从 指定 元 素 上 删除 的 一 个 或 多 个 事件 处 理 程序 。 


如 果 没 有 规定 参数 ，unbind() 方法 会 删除 指定 元 素 的 所 有 事件 处理 程序 。 
语法 


$(_selector_).unbind(_event_,_function_ ) 


参数 描述 
Sie 可 选 。 规 定 删 除 元 素 的 一 个 或 多 个 事件 由 空格 分 隔 多 个 事件 值 。 如 果 只 规定 了 


该 参数 ， 则 会 删除 绑 定 到 指定 事件 的 所 有 函数 。 
function ”可 选 。 规 定 从 元 素 的 指定 事件 取消 绑 定 的 函数 名 。 


使 用 Event 对 象 来 取消 绑 定 事件 处 理 程序 


规定 要 删除 的 事件 对 象 。 用 于 对 自身 内 部 的 事件 取消 绑 定 〈 比 如 当 事 件 已 被 触发 一 定 次 数 之 
后 ， 删 除 事件 处 理 程序 ) 。 


如 果 未 规定 参数 ， 则 unbind() 方法 会 删除 指定 元 素 的 所 有 事件 处 理 程 序 。 
语法 
$(_selector_).unbind(_event0bj_) 


参数 描述 
eventObj ”可 选 。 规 定 要 使 用 的 事件 对 象 。 这 个 eventObj 参数 来 自 事件 绑 定 加 数 。 
亲 目 试 一 试 - 实例 
未 明证 二 头 


取消 绑 定 特定 的 函数 


如 何 使 用 unbind() 方法 取消 绑 定 元 素 指 定 事件 的 具体 豆 数 。 


jQuery 事件 - undelegate() 方法 
实例 


从 所 有 元 素 删除 由 delegate() 方法 添加 的 所 有 事件 处 理 器 : 


$("body") .undelegate() ， 
一 
undelegate() 方法 删除 由 delegate() 方法 添加 的 一 个 或 多 个 事件 义理 程序 。 


语法 


$(_selector_).undelegate(_selector_,_event_,_function_ ) 


参数 描述 
selector 可 选 。 规 定 需要 删除 事件 处 理 程序 的 选择 器 。 
event 可 选 。 规 定 需 要 删除 处 理 函 数 的 一 个 或 多 个 事件 类 型 。 
function 可 选 。 规 定 要 删除 的 具体 事件 处 理 函 数 。 


亲 目 试 一 实例 


删除 事件 处 理 程序 ， 由 delegate() 添加 ， 来 自 具体 选择 器 

如 何 使 用 undelegate() 方法 从 指定 元 素 删 除 所 有 事件 处 理 程序 。 

删除 指定 事件 类 型 的 事件 处 理 程序 ， 由 delegate() 添加 ， 来 自 指定 元 素 

如 何 使 用 undelegate() 方法 从 指定 元 素 删 除 具体 事件 类 型 的 所 有 事件 义理 程序 。 
删除 由 delegate() 添加 的 具体 函数 

如 何 使 用 undelegate() 方法 为 事件 处 理 程序 删除 来 自 特定 事件 类 型 的 特定 函数 。 


jQuery 事件 - unload 属性 


实例 
当 用 户 点 击 链接 离开 本 页 时 ， 弹 出 一 个 消息 杠 : 


$(window) .unload(function(){ 
alert("Goodbye!"); 
}); 


ch 、 : 
当 用 户 离 开 页 面 时 ， 会 发 生 unload 事件 。 
具体 来 说 ， 当 发 生 以 下 情况 时 ， 会 发 出 unload 事件 : 


。 点 击 某 个 离开 页 面 的 链接 

。 在 地 址 栏 中 键入 了 新 的 URL 
使 用 前 进 或 后 退 按钮 

。 天 闭 浏览 器 

。 重新 加 载 页 面 


unload() 方法 将 事件 处 理 程序 绑 定 到 unload 事件 。 


unload() 方法 只 应 用 于 window 对 象 。 
语法 
_event_.unload(_function_ ) 


参数 摘 ; 
function 必需 。 规 定 当 触发 unload 事件 时 运行 的 函数 。 


jQuery 参考 手册 - 效果 


jQuery 效果 男 数 


方法 描述 
animate() 对 被 选 元 素 应 用 “ 自 定义 ”的 动画 
clearQueue!() 对 被 选 元 素 移 除 所 有 排队 的 函数 〈 仍 未 运行 的 ) 
delay() 对 被 选 元 素 的 所 有 排队 郴 数 〈 仍 未 运行 ) 设置 延迟 
dequeue!() 运行 被 选 元 素 的 下 一 个 排队 函数 
fadeln() 逐 淅 改变 被 选 元 素 的 不 透明 度 ， 从 隐藏 到 可 见 
fadeOut() 逐渐 改变 被 选 元 素 的 不 透明 度 ， 从 可 见 到 隐藏 
fadeTo() 把 被 选 元 素 逐 渐 改 变 至 给 定 的 不 透明 度 
hide() 隐藏 被 选 的 元 素 
queue!() 显示 被 选 元 素 的 排队 函数 
show() 显示 被 选 的 元 素 
slideDown() 通过 调整 高 度 来 滑动 显示 被 选 元 素 
slideToggle() 对 被 选 元 素 进行 滑动 隐藏 和 滑动 显示 的 切换 
slideUp() 通过 调整 高 度 来 滑动 隐藏 被 选 元 素 
stop() 停止 在 被 选 元 素 上 运行 动画 


toggle() 对 被 选 元 素 进 行 隐藏 和 显示 的 切换 


jQuery 效果 - animate() 方法 
例 


改变 "div" 元 素 的 高 度 : 


将 


$(".btn1i").click(function(){ 
$("#box").animate( {height:"300px"}); 


定义 和 用 法 
animate() 方法 执行 CSS 属性 集 的 自 定义 动画 。 


该 方法 通过 CSS 样 式 将 元 素 从 一 个 状态 改变 为 另 一 个 状态 。CSS 属 性 值 是 逐渐 改变 的 ， 这 样 
就 可 以 创建 动画 效果 。 


只 有 数字 值 可 创建 动画 (比如 "margin:30px") 。 字 符 串 值 无 法 创建 动画 (上 比如 "background- 
color:red") 。 


注释 : 使 用 "+=" 或 "-=" 来 创建 相对 动画 (relative animations) 。 
语法 1 


$(_selector_).animate(_styles_,_speed ,_easing_,_callback_) 
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参数 描述 
必需 。 规 定 产生 动画 效果 的 CSS 样式 和 值 。 可 能 的 CSS 样式 值 〈 提 供 实 
例 ) :backgroundPosition borderwWidth borderBottomWwidth 


borderLeftwidth borderRightwidth borderTopwWidth borderSpacing 
margin marginBottom marginLeft marginRight marginTop outlinewidth 
styles padding paddingBottom paddingLeft paddingRight paddingTop height 
width maxHeight maxwidth minHeight minwidth font fontSize 
bottom leftl Pright top lletterspacing) IwordSspacing® llimneHelght 


textIndent 注释 : CSS 样式 使 用 DOM 名 称 (比如 "fontSize") 来 设置 ， 而 
非 CSS 名 称 (比如 "font-size") 。 


speed 可 选 。 规 定 动画 的 速度 。 默 认 是 "normal"。 可 能 的 值 : 毫秒 (比如 1500) 
上 "slow" "normal" "fast" 
可 选 。 规 定 在 不 同 的 动画 点 中 设置 动画 速度 的 easing 函数 。 内 置 的 easing 


Sasing 函数 : swing linear 7 更 多 easing 加 数 。 
可 选 。animate 琅 数 执行 完 之 后 ， 要 执 a 如 需 学 习 更 多 有 关 callback 


callback | pw 内 容 ， 请 访问 我 们 的 jQuery Callback 这 
各 法 2 


$(_selector_).animate(_styles_,_options_) 


参数 描述 
styles 必需 。 规 定 产生 动画 效果 的 CSS 样式 和 值 (同上 ) 。 


可 选 。 规 定 动画 的 额外 选项 。 可 能 的 值 : speed - 设置 动画 的 速度 easing - 
规定 要 使 用 的 easing 函数 callback - 规定 动画 完成 之 后 要 执行 的 画 数 step 
options ，- 规定 动画 的 每 一 步 完成 之 后 要 执行 的 画 数 queue - 布尔 值 。 指 示 是 否 在 效果 
队列 中 放置 动画 。 如 果 为 false， 则 动画 将 立即 开始 specialEasing -来 自 
styles 参数 的 一 个 或 多 个 CSS 属性 的 映射 ， 以 及 它们 的 对 应 easing 画 数 
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jQuery 效果 - clearQueue() 方法 
例 


停止 当前 正在 运行 的 动画 : 


将 


$("#stop").click(function( ){ 
$("#box").clearQueue( ); 


定义 和 用 法 
clearQueue() 方法 停止 队列 中 所 有 仍 示 执行 的 函数 。 


与 stop() 方法 不 同 ， (只 适用 于 动画 ) ，clearQueue() 能 够 清除 任何 排队 的 函数 (通过 
.queue() 方法 添加 到 通用 jQuery 队列 的 任何 函数 ) 。 


语法 
$(_selector_).clearQueue(_queueName_ ) 


参数 描述 
queueName 可 选 。 规 定 要 停止 的 队列 的 名 称 。 黑 认 是 "fx"， 标 准 效果 队列 。 


jQuery 效果 - fadeln() 方法 


/> 
实例 
使 用 淡 入 效果 来 显示 一 个 隐藏 的 <p> 元 素 : 


$(".btn2").click(function(){ 
$("p").fadeIn(); 


二 、 : 
fadeln() 方法 使 用 淡 入 效果 来 显示 被 选 元 素 ， 假 如 该 元 素 是 隐藏 的 。 


语法 


$(_selector_).fadeIn(_speed ,_callback_ ) 


参数 描述 
可 选 。 规 定 元 素 从 隐藏 到 可 见 的 速度 。 上 默认 为 "normal"。 可 能 的 值 : 毫秒 
speed (比如 1500) "slow" "normal" "fast" 在 设置 速度 的 情况 下 ， 元 素 从 隐藏 到 可 


见 的 过 程 中 ， 会 逐渐 地 改变 其 透明 度 (这 样 会 创造 淡 入 效果 ) 。 


可 选 。fadeln 豆 数 执行 完 之 后 ， 要 执行 的 琅 数 。 如 需 学 习 更 多 有 关 callback 
callback ”的 内 容 ， 请 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设 置 了 speed 参数 ， 
否则 不 能 设置 该 参数 。 


提示 和 注释 
提示 : 如 果 元 素 已 经 显示 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规定 了 callback 轴 数 。 


注释 : 该 效果 适用 于 通过 jQuery 隐藏 的 元 素 ， 或 在 CSS 中 声明 display:none 的 元 素 (但 不 
适用 于 visibility:hidden 的 元 素 ) 。 


亲自 试 一 试 - 实例 
使 用 speed 参数 
使 用 speed 参数 来 对 淡 入 或 淡出 元 素 。 


jQuery 效果 - fadeOut() 方法 


实例 
使 用 淡出 效果 来 隐藏 一 个 <p> 元 素 : 


$(".btn1").click(function(){ 
$("p").fadeOut(); 
); 


二 、 : 
fadeOut() 方法 使 用 淡出 效果 来 隐藏 被 选 元 素 ， 假 如 该 元 素 是 隐藏 的 。 
语法 


$(_selector_).fadeOut(_speed ,_callback_ ) 


参数 描述 
可 选 。 规 定 元 素 从 可 见 到 隐藏 的 速度 。 上 默认 为 "normal"。 可 能 的 值 : 毫秒 
speed (比如 1500) "slow" "normal" "fast" 在 设置 速度 的 情况 下 ， 元 素 从 可 见 到 隐 


藏 的 过 程 中 ， 会 逐渐 地 改变 其 透明 度 (这 样 会 创造 淡出 效果 ) 。 


可 选 。fadeOut 本 数 执行 完 之 后 ， 要 执行 的 函数 。 如 需 学 习 更 多 有 关 callback 
callback ”的 内 容 ， 请 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设置 了 speed 参数 ， 
否则 不 能 设置 该 参数 。 


提示 和 注释 
提示 : 如 果 元 素 已 经 隐藏 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规定 了 callback 本 数 。 
亲 目 试 一 试 - 实例 


使 用 speed 参数 
使 用 speed 参数 来 对 淡 入 或 淡出 元 素 。 


jQuery 效果 -fadeTo() 方法 


实例 
使 用 淡出 效果 来 隐藏 一 个 <p> 元 素 : 


$(".btn1i").click(function(){ 
$("p").fadeTo(1000,0.4); 


了 


定义 和 用 法 
fadeTo() 方法 将 被 选 元 素 的 不 透明 度 逐 渐 地 改变 为 指定 的 值 。 


语法 


$(_selector_).fadeTo(_speed ， opacity ， callback_) 


参数 描述 


可 选 。 规 定 元 素 从 当前 透明 度 到 指定 透明 度 的 速度 。 可 能 的 值 : 毫秒 (上 比如 


Soren 1500) "slow" "normal" "fast" 


opacity ”必需 。 规 定 要 淡 入 或 淡出 的 透明 度 。 必 须 是 介 于 0.00 与 1.00 之 间 的 数字 。 


可 选 。fadeTo 豆 数 执行 完 之 后 ， 要 执行 的 函数 。 如 需 学 习 更 多 有 关 callback 
callback ”的 内 容 ， 请 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设置 了 speed 参数 ， 
否则 不 能 设置 该 参数 。 


jQuery 效果 - hide() 方法 


实例 


隐藏 可 见 的 <p> 元 素 : 


$(".btn1").click(function(){ 
$("p").hide( ); 
}); 


定义 和 用 法 
如 果 被 选 的 元 素 已 被 显示 ， 则 隐藏 该 元 素 。 


语法 


$(_selector_).hide(_speed ,_callback_ ) 


参数 描述 


可 选 。 规 定 元 素 从 可 见 到 隐藏 的 速度 。 黑 认为 "0"。 可 能 的 值 : 毫秒 (上 比如 
Speed 1500) "slow" "normal" "fast" 在 设置 速度 的 情况 下 ， 元 素 从 可 见 到 隐藏 的 过 程 
， 会 逐渐 地 改变 其 高 度 、 宽 度 、 外 边 距 、 内 边 距 和 透明 度 。 


可 选 。hide 辑 数 执行 完 之 后 ， 要 执行 的 范 数 。 如 需 学 习 更 多 有 关 callback 的 
callback 内容， 请 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设 置 了 speed 参数 ， 否 
则 不 能 设置 该 参数 。 


提示 和 注释 


提示 : 如 果 元 素 已 经 是 完全 可 见 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规定 了 callback 画 数 。 


亲 目 试 一 试 - 实例 
使 用 speed 参数 

使 用 speed 参数 来 隐藏 和 显示 元 素 。 
使 用 speed 和 callback 参数 


使 用 speed 和 callback 参数 来 隐藏 和 显示 元 素 。 
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jQuery 效果 - show() 方法 


实例 


显示 出 隐藏 的 <p> 元 素 。 


$(".btn2").click(function(){ 
$("p").show(); 
}); 


定义 和 用 法 


如 果 被 选 元 素 已 被 隐藏 ， 则 显示 这 些 元 素 : 


语法 


$(_selector_).show(_speed ,_callback_ ) 


参数 


描述 


可 选 。 规 定 元 素 从 隐藏 到 完全 可 见 的 速度 。 黑 认为 "0"。 可 能 的 值 : 毫秒 
Speed (比如 1500) "slow" "normal" "fast" 在 设置 速度 的 情况 下 ， 元 素 从 隐藏 到 完 
全 可 见 的 过 程 中 ， 会 逐渐 地 改变 其 高 度 、 宽 度 、 外 边 距 、 内 边 距 和 透明 度 。 


可 选 。show 画 数 执行 完 之 后 ， 要 执行 的 函数 。 如 需 学 习 更 多 有 关 callback 的 
callback ， 内容， 请 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设 置 了 speed 参数 ， 否 


则 不 能 设置 该 参数 。 


提示 和 注释 


提示 : 如 果 元 素 已 经 是 完全 可 见 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规定 了 callback 画 数 。 


注释 : 该 效果 适用 于 通过 jQuery 隐藏 的 元 素 ， 或 在 CSS 中 声明 display:none 的 元 素 (但 不 


适用 于 visibility:hidden 的 元 素 ) 。 


亲 目 试 一 试 - 实例 
使 用 speed 参数 


使 用 speed 参数 来 隐藏 和 显示 元 素 。 
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使 用 speed 和 callback 参数 


使 用 speed 和 callback 参数 来 隐藏 和 显示 元 素 。 


jQuery 效果 - show() 方法 
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jQuery 效果 - slideDown() 方法 


实例 
以 滑动 方式 显示 隐藏 的 <p> 元 素 : 


$(".btn2").click(function(){ 
$("p").slideDown( ); 


ch 、 、 
slideDown() 方法 通过 使 用 滑动 效果 ， 显 示 隐 藏 的 被 选 元 素 。 


语法 


$(_selector_).slideDown(_speed ,_callback_ ) 


参数 描述 
可 选 。 规 定 元 素 从 隐藏 到 可 见 的 速度 (或 者 相反 ) 。 黑 认为 "normal"。 可 能 
speed 的 值 : 毫秒 (比如 1500) "slow" "normal" "fast" 在 设置 速度 的 情况 下 ， 元 素 
从 隐藏 到 可 见 的 过 程 中 ， 会 逐渐 地 改变 其 高 度 。 
可 选 。slideDown 画 数 执行 完 之 后 ， 要 执行 的 函数 。 如 需 学 习 更 多 有 关 


callback ”callback 的 内 容 ， 请 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设置 了 speed 
参数 ， 否 则 不 能 设置 该 参数 。 


提示 和 注释 
提示 : 如 果 元 素 已 经 是 完全 可 见 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规 定 了 callback 画 数 。 


注释 : 该 效果 适用 于 通过 jQuery 隐藏 的 元 素 ， 或 在 CSS 中 声明 display:none 的 元 素 (但 不 
适用 于 visibility:hidden 的 元 素 ) 。 


亲 目 试 一 试 - 实例 
使 用 speed 参数 


使 用 speed 参数 来 隐藏 和 显示 元 素 。 


jQuery 效果 - slideToggle() 方法 
实例 


通过 使 用 滑动 效果 ， 在 显示 和 隐藏 状态 之 间 切 换 <p> 元 素 : 


$(".btn1i").click(function(){ 
$("p").slideToggle(); 
}); 


= 、 
slideToggle() 方法 通过 使 用 滑动 效果 (高 度 变化 ) 来 切换 元 素 的 可 见 状 态 。 
如 果 被 选 元 素 是 可 见 的 ， 则 隐藏 这 些 元 素 ， 如 果 被 选 元 素 是 隐藏 的 ， 则 显示 这 些 元 素 。 
语法 
$(_selector_).slideToggle(_speed ,_callback_ ) 


参数 描述 
可 选 。 规 定 元 素 从 隐藏 到 可 见 的 速度 (或 者 相反 ) 。 默 认为 "normal"。 可 能 


speed 的 值 : 毫秒 (上 比如 1500) "slow" "normal" "fast" 在 设 置 速度 的 情况 下 ， 元 素 
在 切换 的 过 程 中 ， 会 逐渐 地 改变 其 高 度 (这 样 会 创造 滑动 效果 ) 。 


可 选 。toggle 画 数 执行 完 之 后 ， 要 执行 的 画 9 数 。 如 需 学 习 更 多 有 关 callback 
callback ”的 内 容 ， 请 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设置 了 speed 参数 ， 
否则 不 能 设置 该 参数 。 


提示 和 注释 
提示 : 如 果 元 素 已 经 隐藏 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规 定 了 callback 画 数 。 


亲 目 试 一 实例 


使 用 speed 参数 


使 用 speed 参数 来 切换 上 下 滑动 地 显示 和 隐藏 元 素 。 


jQuery 效果 - slideUp() 方法 


实例 
以 滑动 方式 隐藏 <p> 元 素 : 


$(".btn1").click(function(){ 
$("p").slideUp(); 
); 


hi 、 : 
通过 使 用 滑动 效果 ， 隐 藏 被 选 元 素 ， 如 果 元 素 已 显示 出 来 的 话 。 
语法 

$(_selector_).slideUp(_speed ,_callback_ ) 


参数 描述 


可 选 。 规 定 元 素 从 可 见 到 隐藏 的 速度 (或 者 相反 ) 。 黑 认为 "normal"。 可 能 
speed 的 值 : 毫秒 (比如 1500) "slow" "normal" "fast" 在 设置 速度 的 情况 下 ， 元 素 
从 可 见 到 降 藏 的 过 程 中 ， 会 逐渐 地 改变 其 高 度 〈 这 样 会 创造 滑动 效果 ) 。 
可 选 。slideUp 画 数 执行 完 之 后 ， 要 执行 的 函数 。 如 需 学 习 更 多 有 关 callback 
callback ”的 内 容 ， 请 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设置 了 speed 参数 ， 
否则 不 能 设置 该 参数 。 


提示 和 注释 
提示 : 如 果 元 素 已 经 隐藏 ， 则 该 效果 不 产生 任何 变化 ， 除 非 规定 了 callback 本 数 。 
亲 目 试 一 试 - 实例 


使 用 speed 参数 


使 用 speed 参数 来 隐藏 和 显示 元 素 。 


jQuery 效果 - stop() 方法 


实例 
停止 当前 正在 运行 的 动画 : 


$("#stop").click(function(){ 
$("#box").stop(); 


定义 和 用 法 
stop() 方法 停止 当前 正在 运行 的 动画 。 


语法 


$(_selector_).stop(_stopAll ，goToEnd_) 


参数 描述 
stopAll 可 选 。 规 定 是 否 停 止 被 选 元 素 的 所 有 加 入 队列 的 动画 。 
可 选 。 规 定 是 否 人 允许 完成 当前 的 动画 。 该 参数 只 能 在 设置 了 stopAll 参数 时 


goToEnd 重用 


亲 目 试 一 试 - 实例 


停止 动画 队列 
停止 被 选 元 素 的 所 有 加 入 队列 的 动画 。 
在 当前 动画 完成 后 停止 动画 队列 


停止 被 选 元 素 的 所 有 加 入 队列 的 动画 ， 但 允许 完成 当前 动画 。 


jQuery 效果 - toggle() 方法 
例 


切换 <p> 元 素 的 显示 与 隐藏 状态 : 


将 


$(".btn1").click(function(){ 
$("p").hide( ); 
}); 


定义 和 用 法 
toggle() 方法 切换 元 素 的 可 见 状态 。 


如 果 被 选 元 素 可 见 ， 则 隐藏 这 些 元 素 ， 如 果 被 选 元 素 隐 藏 ， 则 显示 这 些 元 素 。 
语法 


$(_selector_).toggle(_speed ,_callback_,_switch_) 


参数 描述 


可 选 。 规 定 元 素 从 可 见 到 隐藏 的 速度 (或 者 相反 ) 。 黑 认为 "0"。 可 能 的 值 : 
毫秒 (比如 1500) "slow" "normal" "fast" 在 设置 速度 的 情况 下 ， 元 素 从 可 见 
到 隐藏 的 过 程 中 ， 会 逐 淅 地 改变 其 高 度 、 宽 度 、 外 边 距 、 内 边 距 和 透明 度 。 
如 果 设 置 此 参数 ， 则 无 法 使 用 switch 参数 。 


可 选 。toggle 加 数 执 行 完 之 后 ， 要 执行 的 画 数 。 如 需 学 习 更 多 有 关 callback 
callback ”的 内 容 ， 请 访问 我 们 的 jQuery Callback 这 一 章 。 除 非 设 置 了 speed 参数 ， 
否则 不 能 设置 该 参数 。 


可 选 。 布 尔 值 。 规 定 toggle 是 否 隐 藏 或 显示 所 有 被 选 元 素 。 True - 显示 所 有 
switch 元 素 False - 隐藏 所 有 元 素 如 果 设 置 此 参数 ， 则 无 法 使 用 speed 和 callback 


参数 。 


提示 和 注释 


注释 : 该 效果 适用 于 通过 jQuery 隐藏 的 元 素 ， 或 在 CSS 中 声明 display:none 的 元 素 (但 不 
适用 于 visibility:hidden 的 元 素 ) 。 


亲 目 试 一 试 - 实例 


使 用 speed 参数 
使 用 speed 参数 来 隐藏 和 显示 元 素 。 
使 用 switch 参数 


使 用 switch 参数 来 显示 所 有 隐藏 的 段落 。 


jQuery 参考 手册 - 文档 操作 
jQuery 文档 操作 方法 


这 些 方 法 对 于 XML 文档 和 HTML 文档 均 是 适用 的 ， 除 了 : html()。 


方法 描述 


addClass() 向 匹配 的 元 素 添加 指定 的 类 名 。 

after() 在 匹配 的 元 素 之 后 插入 内 容 。 

append() 向 匹配 元 素 集 合 中 的 每 个 元 素 结 尾 插入 由 参数 指定 的 内 容 。 
appendTo() 向 目标 结尾 插入 匹配 元 素 集合 中 的 每 个 元 素 。 
attr() 设置 或 返回 匹配 元 素 的 属性 和 值 。 

before() 在 每 个 匹配 的 元 素 之 前 插入 内 容 。 

clone() 创建 匹配 元 素 集 合 的 副本 。 

detach() 从 DOM 中 移 除 匹配 元 素 集 合 。 

empty() 删除 匹配 的 元 素 集 合 中 所 有 的 子 节点 。 

hasClass() 检查 匹配 的 元 素 是 否 拥 有 指定 的 类 。 

html() 设置 或 返回 匹配 的 元 素 集合 中 的 HTML 内 容 。 
insertAfter() 把 匹配 的 元 素 插入 到 另 一 个 指定 的 元 素 集 合 的 后 面 。 
insertBefore() 把 匹配 的 元 素 插入 到 另 一 个 指定 的 元 素 集 合 的 前 面 。 
prepend() 向 匹配 元 素 集 合 中 的 每 个 元 素 开 头 插入 由 参数 指定 的 内 容 。 
prependTo() 向 目标 开头 插入 匹配 元 素 集合 中 的 每 个 元 素 。 
remove() 移 除 所 有 匹配 的 元 素 。 

removeAttr() 从 所 有 匹配 的 元 素 中 移 除 指定 的 属性 。 
removeClass() 从 所 有 匹配 的 元 素 中 删除 全 部 或 者 指定 的 类 。 
replaceAll() 用 匹配 的 元 素 蔡 换 所 有 匹配 到 的 元 素 。 
replaceWith() 用 新 内 容 蔡 换 匹 配 的 元 素 。 

text() 设置 或 返回 匹配 元 素 的 内 容 。 

toggleClass() 从 匹配 的 元 素 中 添加 或 删除 一 个 类 。 

unwrap() 移 除 并 替换 指定 元 素 的 父 元 素 。 

val() 设置 或 返回 匹配 元 素 的 值 。 

wrap() 把 匹配 的 元 素 用 指定 的 内 容 或 元 素 包 右 起 来 。 
wrapAll() 把 所 有 匹配 的 元 素 用 指定 的 内 容 或 元 素 包 应 起 来 。 


wrapinner() 将 每 一 个 匹配 的 元 素 的 子 内 容 用 指定 的 内 容 或 元 素 包 库 起 来 。 


jQuery 属性 操作 - addClass() 方法 
实例 


向 第 一 个 p 元 素 添加 一 个 类 : 


$("button").click(function(){ 
$("p:first").addCclass("intro"); 
}); 


定义 和 用 法 


addClass() 方法 向 被 选 元 素 添加 一 个 或 多 个 类 。 


该 方法 不 会 移 除 已 存在 的 class 属性 ， 仅 仅 添加 一 个 或 多 个 class 属性 。 


提示 。 如 需 添加 多 个 类 ， 请 使 用 空格 分 隔 类 名 。 
语法 
$(selector).addClass(_class_ ) 


参数 描述 


class 必需 。 规 定 一 个 或 多 个 class 名 称 。 
使 用 函数 来 添加 类 
使 用 范 数 向 被 选 元 素 添 加 类 。 
语法 
$(selector).addcClass(_function_(_index_,_oldclass) ) 


参数 描述 


规定 返回 一 个 或 多 个 待 添加 类 名 的 函 9 数 。 


index- 可 


必需 
function(index,oldclass) ” 选 。 选 择 器 的 index 位 置 。 class - 可 选 。 选 择 器 的 旧 的 类 
名 。 


亲自 试 一 试 - 实例 
向 元 素 添加 两 个 类 
如 何 向 被 选 元 素 添加 两 个 class。 


改变 元 素 的 类 
如 任何 使 用 addClass() 和 removeClass() 来 移 除 class， 并 添加 新 的 class。 


jQuery 文档 操作 - after() 方法 
实例 


在 每 个 p 元 素 后 插入 内 容 : 


$("button").click(function(){ 
$("p").after("<p>Hello world!</p>"); 


定义 和 用 法 
after() 方法 在 被 选 元 素 后 插入 指定 的 内 容 。 
语法 


$(selector).after(_content_) 


参数 描述 
content 必需 。 规 定 要 插入 的 内 容 (可 包含 HTML 标签 ) 。 


使 用 范 数 来 插入 内 容 
使 用 画 数 在 被 选 元 素 之 后 插入 指定 的 内 容 。 
语法 


$(selector).after(_function_(_index_)) 


参数 描述 


必需 。 规 定 返 回 待 插入 内 容 的 画 数 。 index - 可 选 。 接 收 选择 器 的 


function(index) index 位 置 


jQuery 文档 操作 - append() 方法 
例 


在 每 个 p 元 素 结尾 插 和 内容 : 


将 


$("button").click(function(){ 
$("p").append(" <b>Hello world!</b>"); 
); 


定义 和 用 法 
append() 方法 在 被 选 元 素 的 结尾 〈 仍 然 在 内 部 ) 插入 指定 内 容 。 
提示 : append() 和 appendTo() 方法 执行 的 任务 相同 。 不 同 之 处 在 于 : 内 容 的 位 置 和 选择 器 。 


语法 


$(selector).append(_content_) 


参数 描述 
content 必需 。 规 定 要 插入 的 内 容 (可 包含 HTML 标签 ) 。 


使 用 函数 来 附加 内 容 

使 用 函数 在 指定 元 素 的 结尾 插入 内 容 。 

语法 
$(selector).append(_function(index,html) ) 


参数 描述 


必需 。 规 定 返 回 待 插入 内 容 的 范 数 。 index - 可 选 。 接 收 选择 器 的 


function(index,htm) | index 位 置 。 html - 可 选 。 接 收 选择 器 的 当前 HTML。 


jQuery 文档 操作 - appendTo() 方法 


实例 
在 每 个 p 元 素 结尾 插入 内 容 : 


$("button").click(function(){ 
$("<b>Hello World!</b>").appendTo("p"); 


}); 


定义 和 用 法 
appendTo() 方法 在 被 选 元 素 的 结尾 〈 仍 然 在 内 部 ) 插入 指定 内 容 。 


提示 : append() 和 appendTo() 方法 执行 的 任务 相同 。 不 同 之 处 在 于 : 内 容 和 选择 器 的 位 置 ， 
以 及 append() 能 够 使 用 函数 来 附加 内 容 。 


语法 


$(_content_).appendTo(_selector_) 


参数 描述 
content 必需 。 规 定 要 插入 的 内 容 (可 包含 HTML 标签 ) 。 
selector 必需 。 规 定 把 内 容 追 加 到 哪个 元 素 上 。 


jQuery 属性 操作 - attr() 方法 


实例 
改变 图 像 的 width 属性 : 


$("button").click(function(){ 
$("img").attr("width","180"); 


定义 和 用 法 
attr() 方法 设置 或 返回 被 选 元 素 的 属性 值 。 
根据 该 方法 不 同 的 参数 ， 其 工作 方式 也 有 所 差异 。 


返回 属性 值 


返回 被 选 元 素 的 属性 值 。 
语法 


$(_SseJlector_),.attr(_attribute_) 


参数 


attribute 规定 要 获取 其 值 的 属性 。 
设置 属性 / 值 
设置 被 选 元 素 的 属性 和 值 。 
语法 


$(_Sselector_),attr(_attribute_，Vvalue_) 


attribute 规定 属性 的 名 称 。 
value 规定 属性 的 值 。 


使 用 范 数 来 设置 属性 / 值 
置 被 选 元 素 的 属性 和 值 。 
语法 


$(_seJlector_) ,attr(_attribute_，function(index,oldvalue)_) 


attribute 规定 属性 的 名 称 。 
规定 返回 属性 值 的 函数 。 该 函数 可 接收 并 使 用 选择 器 的 index 


function(index,oldvalue) 值 和 当前 属性 值 


没 置 多 个 属性 / 值 对 


为 被 选 元 素 设置 一 个 以 上 的 属性 和 值 。 


$(_selector_).attr({_attribute:value , _attribute:value ...}) 


参数 描述 


attribute:value 规定 一 个 或 多 个 属性 / 值 对 。 


jQuery 文档 操作 - before() 方法 


实例 
在 每 个 p 元 素 前 插入 内 容 : 


$("button").click(function(){ 
$("p").before("<p>Hello world!</p>"); 


}); 
定义 和 用 法 
before() 方法 在 被 选 元 素 前 插入 指定 的 内 容 。 


语法 


$(selector).before(_content_) 


参数 描述 
content 必需 。 规 定 要 插入 的 内 容 (可 包含 HTML 标签 ) 。 


使 用 范 数 来 插入 内 容 
使 用 函数 在 指定 的 元 素 前 面 插入 内 容 。 
语法 


$(selector).before(_function(index)_) 


参数 描述 


必需 。 规 定 返 回 待 插入 内 容 的 画 数 。 index - 可 选 。 接 收 选择 器 的 


function(index) index 位 置 


jQuery 文档 操作 - clone() 方法 


实例 
克隆 并 追加 一 个 p 元 素 : 


$("button").click(function(){ 
$("body").append($("p").clone()); 
}); 


定义 和 用 法 


clone() 方法 生成 被 选 元 素 的 副本 ， 包 含 子 节点 、 文 本 和 属性 。 
语法 


$(_selector_).clone(_includeEvents ) 


参数 描述 
; 可 选 。 布 尔 值 。 规 定 是 否 复制 元 素 的 所 有 事件 处 理 。 默 认 地 ， 副 本 中 不 
includeEvents 包含 事件 处 理 器 。 


亲自 试 一 试 - 实例 
复制 一 个 元 素 ， 包 括 事件 处 理 器 
使 用 clone() 方法 来 复制 元 素 ， 包 括 其 事件 处 理 器 。 


jQuery 文档 操作 - detach() 方法 


实例 
移 除 所 有 p 元 素 : 


$("button").click(function(){ 
$("p").detach(); 
}); 


定义 和 用 法 
detach() 方法 移 除 被 选 元 素 ， 包 括 所 有 文本 和 子 节点 。 


这 个 方法 会 保留 jQuery 对 象 中 的 匹配 的 元 素 ， 因 而 可 以 在 将 来 再 使 用 这 些 匹配 的 元 素 。 
detach() 会 保留 所 有 绑 定 的 事件 、 附 加 的 数据 ， 这 一 点 与 remove() 不 同 。 


语法 


$(_selector_) ,detach() 


亲 目 试 一 试 - 实例 

移动 元 素 

使 用 detach() 方法 来 移动 元 素 。 

删除 并 恢复 一 个 元 素 

使 用 detach() 方法 来 删除 并 恢复 一 个 元 素 。 
移动 元 素 并 保留 其 click 事件 

使 用 detach() 方法 来 移动 元 素 ， 并 保留 元 素 的 jQuery 数据 。 


jQuery 文档 操作 - empty() 方法 


实例 
移 除 p 元 素 的 内 容 : 


$(".btn1i").click(function(){ 
me empty(); 


定义 和 用 法 


empty() 方法 从 被 选 元 素 移 除 所 有 内 容 ， 包 括 所 有 文本 和 子 节点 。 
语法 


$(_selector_).empty() 


亲 目 试 一 试 - 实例 
移 除 元 素 的 内 容 
使 用 empty() 方法 从 元 素 移 除 内 容 。 


jQuery 属性 操作 - hasClass() 方法 


A 
实例 
检查 第 一 个 <p> 元 素 是 否 包 含 "intro" 类 : 


$("button").click(function(){ 
alert($("p:first").hasclass("intro")); 
); 


中 、 : 
hasClass() 方法 检查 被 选 元 素 是 否 包含 指定 的 class。 
语法 


$(_selector_).hasclass(_class_ ) 


参数 描述 


class 必需 。 规 定 需要 在 指定 元 素 中 查找 的 类 。 


jQuery 文档 操作 - html() 方法 


实例 
设置 所 有 p 元 素 的 内 容 : 


$(".btn1i").click(function(){ 
$("p").html("Hello <b>world</b>!"); 
); 


定义 和 用 法 
html() 方法 返回 或 设置 被 选 元 素 的 内 容 (inner HTML)。 


如 果 该 方法 未 设置 参数 ， 则 返回 被 选 元 素 的 当前 内 容 。 
所 站 | 二 其 

返回 元 素 内 容 

当 使 用 该 方法 返回 一 个 值 时 ， 它 会 返回 第 一 个 匹配 元 素 的 内 容 。 
语法 


$(selector).html() 


设置 元 素 内 容 


当 使 用 该 方法 设置 一 个 值 时 ， 它 会 覆盖 所 有 匹配 元 素 的 内 容 。 
语法 


$(_selector_).html(_content_) 


参数 描述 
content 可 选 。 规 定 被 选 元 素 的 新 内 容 。 该 参数 可 包含 HTML 标签 。 


使 用 函数 来 设置 元 乘 内 容 


使 用 画 数 来 设置 所 有 匹配 元 素 的 内 容 。 
语法 


$(_selector_).html(_function(index,oldcontent) ) 


参数 描述 


规定 一 个 返回 被 选 元 素 的 新 内 容 的 函数 。 index - 可 选 。 接 
function(index,oldcontent) ” 收 选择 器 的 index 位 置 。 oldcontent - 可 选 。 接 收 选择 器 的 
当前 内 容 。 


jQuery 文档 操作 - insertAfter() 方法 


实例 
在 每 个 p 元 素 之 后 插入 span 元 素 : 


$("button").click(function(){ 
$("<span>Hello world!</span>").insertAfter("p"); 


定义 和 用 法 
insertAfter() 方法 在 被 选 元 素 之 后 插入 HTML 标记 或 已 有 的 元 素 。 


注释 : 如 果 该 方法 用 于 已 有 元 素 ， 这 些 元 素 会 被 从 当前 位 置 移 走 ， 然 后 被 添加 到 被 选 元 素 之 
后 。 


语法 


$(_content_).insertAfter(_selector_) 


参数 描述 
content 必需 。 规 定 要 插入 的 内 容 。 可 能 的 值 : 选择 器 表达 式 HTML 标记 
selector 必需 。 规 定 在 何人 处 插入 被 选 元 素 。 


亲 目 试 一 试 - 实例 


插入 已 有 的 元 素 
如 何 使 用 insertAfter() 方法 在 每 个 被 选 元 素 之 后 插入 已 存在 的 元 素 。 


jQuery 文档 操作 - insertBefore() 方法 


实例 
在 每 个 p 元 素 之 前 插入 span 元 素 : 


$("button").click(function(){ 
$("<span>Hello world!</span>").insertBefore("p"); 


定义 和 用 法 
insertBefore() 方法 在 被 选 元 素 之 前 插入 HTML 标记 或 已 有 的 元 素 。 


注释 : 如 果 该 方法 用 于 已 有 元 素 ， 这 些 元 素 会 被 从 当前 位 置 移 走 ， 然 后 被 添加 到 被 选 元 素 之 
前 。 


语法 


$(_content_).insertBefore(_selector_) 


参数 描述 
content 必需 。 规 定 要 插入 的 内 容 。 可 能 的 值 : 选择 器 表达 式 HTML 标记 
selector 必需 。 规 定 在 何人 处 插入 被 选 元 素 。 


亲 目 试 一 试 - 实例 


插入 已 有 的 元 素 
如 何 使 用 insertAfter() 方法 在 每 个 被 选 元 素 之 前 插入 已 存在 的 元 素 。 


jQuery 文档 操作 - prepend() 方法 


实例 
在 p 元 素 的 开头 插入 内 容 : 


$(".btn1i").click(function(){ 
$("p").prepend("<b>Hello world!</b>"); 
); 


定义 和 用 法 
prepend() 方法 在 被 选 元 素 的 开头 〈 仍 位 于 内 部 ) 插入 指定 内 容 。 


提示 : prepend() 和 prependTo() 方法 作用 相同 。 差异 在 于 语法 : 内 容 和 选择 器 的 位 置 ， 以 及 
prependTo() 无 法 使 用 画 数 来 插入 内 容 。 


语法 


$(_selector_).prepend(_content_) 


参数 描述 
content 必需 。 规 定 要 插入 的 内 容 (可 包含 HTML 标签 ) 。 


使 用 函数 来 附加 内 容 

使 用 范 数 在 被 选 元 素 的 开头 插入 指定 的 内 容 。 

语法 
$(_selector_).prepend(_function(index,html) ) 


参数 描述 


必需 。 规 定 返 回 待 插入 内 容 的 画 数 。 index - 可 选 。 接 受 选 择 器 


function(Inqdex,htm) 的 index 位 置 。 htnl - 可 选 。 接 受 选择 器 的 当前 HTML。 


jQuery 文档 操作 - prependTo() 方法 


实例 
在 每 个 p 元 素 的 开头 插入 内 容 : 


$(".btn1i").click(function(){ 
$("<b>Hello World!</b>").prependTo("p"); 


定义 和 用 法 
prependTo() 方法 在 被 选 元 素 的 开头 〈 仍 位 于 内 部 ) 插入 指定 内 容 。 


提示 : prepend() 和 prependTo() 方法 作用 相同 。 差 异 在 于 语法 : 内 容 和 选择 器 的 位 置 ， 以 及 
prepend() 能 够 使 用 画 数 来 插入 内 容 。 


语法 


$(_content_).prependTo(_selector_ ) 


参数 描述 
content 必需 。 规 定 要 插入 的 内 容 (可 包含 HTML 标签 ) 。 
selector 必需 。 规 定 在 何 处 插入 内 容 。 


jQuery 文档 操作 - remove() 方法 


实例 
移 除 所 有 <p> 元 素 : 


$("button").click(function(){ 
$("p").remove(); 


定义 和 用 法 
remove() 方法 移 除 被 选 元 素 ， 包 括 所 有 文本 和 子 节点 。 


该 方法 不 会 把 匹配 的 元 素 从 jQuery 对 象 中 删除 ， 因 而 可 以 在 将 来 再 使 用 这 些 匹配 的 元 素 。 


但 除了 这 个 元 素 本 身 得 以 保留 之 外 ，remove() 不 会 保留 元 素 的 jQuery 数据 。 其 他 的 比如 绑 定 
的 事件 、 附 加 的 数据 等 都 会 被 移 除 。 这 一 点 与 detach() 不 同 。 


语法 


$(_selector_) .remove() 


亲自 试 一 试 - 实例 
移动 元 素 


使 用 remove() 方法 来 移动 元 素 。 


jQuery 属性 操作 - removeAttr() 方法 


实例 
从 任何 p 元 素 中 移 除 id 属性 : 


$("button").click(function(){ 
$("p").removeAttr("id"); 


定义 和 用 法 
removeAttr() 方法 从 被 选 元 素 中 移 除 属性 。 
语法 


$(_Sselector_), removeAttr(_attribute_) 


参数 描述 
attribute 必需 。 规 定 从 指定 元 素 中 移 除 的 属性 。 


jQuery 属性 操作 - removeClass() 方法 
例 


移 除 所 有 <p> 的 "intro" 类 : 


将 


$("button").click(function(){ 
$("p:first").removeClass("intro"); 


et ~ Ny 

定义 和 用 法 

removeClass() 方法 从 被 选 元 素 移 除 一 个 或 多 个 类 。 

注释 : 如 果 没 有 规定 参数 ， 则 该 方法 将 从 被 选 元 素 中 删除 所 有 类 。 
语法 


$(_selector_).removeClass(_class_ ) 


参数 描述 


可 选 。 规 定 要 移 除 的 class 的 名 称 。 如 需 移 除 若 干 类 ， 请 使 用 空格 来 分 隔 类 名 。 


Class 如果 不 设 置 该 参数 ， 则 会 移 除 所 有 类 。 


使 用 函数 来 移 除 类 
使 用 画 数 来 油 除 被 选 元 素 中 的 关 。 


$(_selector_).removeClass(_function(index,oldclass) ) 


参数 描述 
必需 。 通 过 运行 函数 来 移 除 指定 的 类 。 index - 可 选 。 接 受 
function(index,oldclass) ”选择 器 的 index 位 置 。 html - 可 选 。 接 受 选 择 器 的 旧 的 类 
值 。 


亲 目 试 一 试 - 实例 


改变 元 素 的 类 
如 何 使 用 addClass() 和 removeClass() 来 移 除 一 个 类 ， 并 添加 一 个 新 的 类 。 


jQuery 文档 操作 - replaceAll() 方法 


实例 
用 粗 体 文本 蔡 效 每 个 段落 : 


$(".btn1i").click(function(){ 
$("p").replaceAll("<b>Hello world!</b>"); 


定义 和 用 法 
replaceAll() 方法 用 指定 的 HTML 内 容 或 元 素 替 换 被 选 元 素 。 


提示 : replaceAll() 与 replaceWith() 作用 相同 。 差 异 在 于 语法 : 内 容 和 选择 器 的 位 置 ， 以 及 
replaceWith() 能 够 使 用 范 数 进行 替换 。 


语法 
$(_content_).replaceAll(_selector_) 


参数 描述 


必需 。 规 定 蔡 换 被 选 元 素 的 内 容 。 可 能 的 值 : HTML 代码 - 比如 ("<div></div>") 
content 新 元 素 - 比如 (document.createElement("div")) 已 存在 的 元 素 - 比如 
($(".div1")) 已 存在 的 元 素 不 会 被 移动 ， 只 会 被 复制 ， 并 包 于 被 选 元 素 。 


selector 必需。 规定 要 替换 的 元 素 。 
亲 目 试 一 试 - 实例 


使 用 新 元 素来 替换 元 素 
使 用 document.createElement() 来 创建 一 个 新 的 DOM 元 素 ， 然 后 用 它 蔡 换 被 选 元 素 。 


jQuery 文档 操作 - replaceWith() 方法 


实例 
用 粗 体 文本 蔡 效 每 个 段落 : 


$(".btn1i").click(function(){ 
$("p").replacewith("<b>Hello world!</b>"); 


定义 和 用 法 
replaceWith() 方法 用 指定 的 HTML 内 容 或 元 素 蔡 换 被 选 元 素 。 


提示 : replaceWith() 与 replaceAll() 作用 相同 。 差 异 在 于 语法 : 内 容 和 选择 器 的 位 置 ， 以 及 
replaceAll() 无 法 使 用 函数 进行 替换 。 


语法 
$(_selector_).replacewith(_content_) 


参数 描述 


必需 。 规 定 蔡 换 被 选 元 素 的 内 容 。 可 能 的 值 : HTML 代码 - 比如 ("<div></div>") 
content 新 元 素 - 比如 (document.createElement("div")) 已 存在 的 元 素 - 比如 
($(".div1")) 已 存在 的 元 素 不 会 被 移动 ， 只 会 被 复制 ， 并 包 于 被 选 元 素 。 


selector ”必需 。 规 定 要 替换 的 元 素 。 
使 用 函数 来 蔡 换 元 柔 

使 用 函数 把 被 选 元 素 蔡 换 为 新 内 容 。 

语法 
$(_selector_).replacewith(_function()) 


参数 描述 
function() 必需 。 返 回 竺 替换 被 选 元 素 的 新 内 容 的 函数 。 


亲自 试 一 试 - 实例 
使 用 新 元 素来 替换 元 素 
使 用 document.createElement() 来 创建 一 个 新 的 DOM 元 素 ， 然 后 用 它 蔡 换 被 选 元 素 。 


jQuery 文档 操作 - text() 方法 


实例 
设置 所 有 <p> 元 素 的 内 容 : 


$(".btn1i").click(function(){ 
$("p").text("Hello <b>world</b>!"); 
); 


定义 和 用 法 
text() 方法 方法 设置 或 返回 被 选 元 素 的 文本 内 容 。 


返回 文本 内 容 


当 该 方法 用 于 返回 一 个 值 时 ， 它 会 返回 所 有 匹配 元 素 的 组 合 的 文本 内 容 (会 删除 HTML 标 
记 ) 。 


语法 


$(_selector_) ,text() 


设置 文本 内 容 
当 该 方法 用 于 设置 值 时 ， 它 会 覆盖 被 选 元 素 的 所 有 内 容 。 


$(_selector_).text(_content_) 


参数 描述 
content 规定 被 选 元 素 的 新 文本 内 容 。 注 释 : 特殊 字符 会 被 编码 。 


使 用 函数 设置 文本 内 容 


使 用 函数 设置 所 有 被 选 元 素 的 文本 内 容 。 


语法 


$(_selector_).text(_function(index,oldcontent) ) 


参数 描述 


必需 。 规 定 返 回 被 选 元 素 的 新 文本 内 容 的 函数 。 index - 
function(index,oldcontent) ”可 选 。 接 受 选择 器 的 index 位 置 。 html - 可 选 。 接 受 选择 


器 的 当前 内 容 。 


jQuery 属性 操作 - toggleClass() 方法 


实例 
对 设置 和 移 除 所 有 <p> 元 素 的 "main" 类 进行 切换 : 


$("button").click(function(){ 
$("p").toggleCclass("main"); 
}); 


Et ~ > 
定义 和 用 法 
toggleClass() 对 设置 或 移 除 被 选 元 素 的 一 个 或 多 个 类 进行 切换 。 


该 方法 检查 每 个 元 素 中 指定 的 类 。 如 果 不 存在 则 添加 类 ， 如 果 已 设置 则 删除 之 。 这 就 是 所 谓 
的 切换 效果 。 


不 过 ， 通 过 使 用 "switch" 参数 ， 您 能 够 规定 只 删除 或 只 添加 类 。 
语法 


$(_selector_).toggleClass(_class_ ,_switch_ ) 





参数 描述 
必需 。 规 定 添加 或 移 除 class 的 指定 元 素 。 如 需 规定 若干 class， 请 使 用 空格 来 
cass | 分 隔 类 名 


Switch ”可 选 。 布 尔 值 。 规 定 是 否 添加 或 移 除 class。 


使 用 函数 来 切换 类 


$(_selector_).toggleClass(_function(index,class) ,_switch ) 


参数 描述 
必需 。 规 定 返 回 需要 添加 或 删除 的 一 个 或 多 个 类 名 的 画 数 。 
function(index,class) ” index - 可 选 。 接 受 选 择 器 的 index 位 置 。 class - 可 选 。 接 受 
选择 器 的 当前 的 类 。 


switch 可 选 。 布 尔 值 。 规 定 是 否 添加 (true) 或 移 除 (false) 类 。 
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jQuery 文档 操作 - unwrap() 方法 


实例 
删除 所 有 <p> 元 素 的 父 元 素 : 


$("button").click(function(){ 
$("p").unwrap(); 
}); 


定义 和 用 法 
unwrap() 方法 删除 被 选 元 素 的 父 元 素 。 
语法 


$(_selector_).unwrap() 


亲自 试 一 试 - 实例 
包 误 或 解 开 元 素 
对 包 襄 和 人 解 开元 素 的 任务 进行 切换 。 


jQuery 属性 操作 - val() 方法 
例 


设置 输入 域 的 值 : 


将 


$("button").click(function(){ 
$(":text").val("Hello World"); 


号- ~ > 

val() 方法 返回 或 设置 被 选 元 素 的 值 。 

元 素 的 值 是 通过 value 属性 设置 的 。 该 方法 大 多 用 于 input 元 素 。 
如 果 该 方法 未 设置 参数 ， 则 返回 被 选 元 素 的 当前 值 。 

语法 


$(_selector_).val(_value ) 





参数 描述 
value 可 选 。 规 定 被 选 元 素 的 新 内 容 。 


返回 Value 属性 
返回 第 一 个 匹配 元 素 的 value 属性 的 值 。 
语法 


$(_selector_).val() 


设置 Value 属性 的 值 


$(_selector_).val(_value ) 





value 设置 Value 属性 的 值 。 


使 用 函数 设置 Value 属性 的 值 


$(_selector_).val(_function(index,oldvalue)_ ) 


参数 描述 


规定 返回 要 设置 的 值 的 范 数 。 index - 可 选 。 接 受 选择 器 的 
function(index,oldvalue) ”index 位 置 。 olqvalue - 可 选 。 接 受 选择 器 的 当前 Value 属 
性 。 


jQuery 文档 操作 - wrap() 方法 
例 


在 <div> 元 素 中 包 库 每 个 段落 : 


将 


$(".btn1i").click(function(){ 
$("p").wrap("<div></div>"); 


定义 和 用 法 
wrap() 方法 把 每 个 被 选 元 素 放置 在 指定 的 HTML 内 容 或 元 素 中 。 
语法 


$(_selector_).wrap(_wrapper_) 


参数 描述 


必需 。 规 定 包 应 被 选 元 素 的 内 容 。 可 能 的 值 : HTML 代码 - 比如 ("<div> 
</div>") 新 元 素 - 比如 (document.createElement("div")) 已 存在 的 元 素 - 比如 
($(".div1")) 已 存在 的 元 素 不 会 被 移动 ， 只 会 被 复制 ， 并 包 衷 被 选 元 素 。 


wrapper 


使 用 函数 来 已 衰 元素 
使 用 丽 数 来 规定 在 每 个 被 选 元 素 周 用 包 吉 的 内 容 。 
语法 


$(_selector_).wrap(_function()_) 


参数 描述 
function() 必需 。 规 定 返 回 包 囊 元 素 的 加 数 。 


亲 目 试 一 试 - 实例 


使 用 新 元 素来 包 衷 

创建 一 个 新 的 DOM 元 素来 包 于 每 个 被 选 元 素 。 
包 囊 或 解 开元 素 

对 包 囊 和 解 开元 素 的 任务 进行 切换 。 


jQuery 文档 操作 - wrapAII( 方法 


实例 
在 <div> 中 包 于 所 有 上 段落 : 


$(".btn1i").click(function(){ 
$("p").wrapAll("<div></div>"); 


定义 和 用 法 
wrapAll() 在 指定 的 HTML 内 容 或 元 素 中 放置 所 有 被 选 的 元 素 。 
语法 


$(_selector_).wrapAll(_wrapper_) 


参数 描述 


必需 。 规 定 包 应 被 选 元 素 的 内 容 。 可 能 的 值 : HTML 代码 - 比如 ("<div> 
wrapper ”</div>") 新 的 DoM 元 素 - 比如 (document.createElement("div")) 已 存在 的 元 素 - 
比如 ($(".div1")) 已 存在 的 元 素 不 会 被 移动 ， 只 会 被 复制 ， 并 包 襄 被 选 元 素 。 


亲自 试 一 试 - 实例 
使 用 新 元 素来 包 应 
创建 一 个 新 的 DOM 元 素来 包 襄 每 个 被 选 元 素 。 


jQuery 文档 操作 - wraplnner() 方法 
实例 


在 每 个 p 元 素 的 内 容 上 包围 b 元 素 : 


$(".btn1i").click(function(){ 
$("p").wrapInner("<b></b>"); 


定义 和 用 法 


wraplnner() 方法 使 用 指定 的 HTML 内 容 或 元 素 ， 来 包 应 每 个 被 选 元 素 中 的 所 有 内 容 (inner 
HTML)。 


语法 


$(_selector_) ,wrapInner(_wrapper_) 


参数 描述 


必需 。 规 定 包围 在 被 选 元 素 的 内 容 周围 的 内 容 。 可 能 的 值 : HTML 代码 - 比如 
wrapper (<div></div> ") 新 的 DOM 元 素 - 比如 (document.createElement("div")) 
PPS” 已 存在 的 元 来 - 比如 ($(".div1")) 已 存在 的 元 素 不 会 被 移动 ， 只 会 被 复制 ， 并 包 
襄 被 选 元 素 。 


wz 类 二 pA 
使 用 函数 包 陡 内容 
使 用 函数 来 规定 包围 在 每 个 被 选 元 素 周 围 的 内 容 。 
语法 
$(_Sselector_) ,wrapInner(_function( )_) 


参数 描述 
function() 必需 。 规 定 返 回 包围 元 素 的 加 数 。 


亲自 试 一 试 - 实例 
使 用 新 元 素来 包 应 


创建 一 个 新 的 DOM 元 素来 包 囊 每 个 被 选 元 素 。 


jQuery 参考 手册 - 属性 操作 
jQuery 属性 操作 方法 


下 面 列 出 的 这 些 方法 获得 或 设置 元 素 的 DOM 属性 。 
这 些 方法 对 于 XML 文档 和 HTML 文档 均 是 适用 的 ， 除 了 : html()。 


方法 描述 
addClass() 向 匹配 的 元 素 添 加 指定 的 类 名 。 
attr() 设置 或 返回 匹配 元 素 的 属性 和 值 。 
hasClass() 检查 匹配 的 元 素 是 否 拥 有 指定 的 类 。 
html() 设置 或 返回 匹配 的 元 素 集合 中 的 HTML 内 容 。 
removeAttr() 从 所 有 匹配 的 元 素 中 移 除 指定 的 属性 。 
removeClass() 从 所 有 匹配 的 元 素 中 删除 全 部 或 者 指定 的 类 。 
toggleClass() 从 匹配 的 元 素 中 添加 或 删除 一 个 类 。 
val() 设置 或 返回 匹配 元 素 的 值 。 


注释 : 中 也 列 出 了 以 上 方法 。 本 参考 页 的 作用 是 方便 用 户 单独 查阅 有 关 属 性 操作 方面 的 方 
法 。 


jQuery 参考 手册 - CSS 操作 


jQuery CSS 操作 函数 


下 面 列 出 的 这 些 方法 设置 或 返回 元 素 的 CSS 相关 属性 。 


CSS 属性 描述 

css() 设置 或 返回 匹配 元 素 的 样式 属性 。 
height() 设置 或 返回 匹配 元 素 的 高 度 。 
offset() 返回 第 一 个 匹配 元 素 相 对 于 文档 的 位 置 。 
offsetParent() 返回 最 近 的 定位 祖先 元 素 。 
position() 返回 第 一 个 匹配 元 素 相 对 于 父 元 素 的 位 置 。 
scrollLeft() 设置 或 返回 匹配 元 素 相对 滚动 条 左 侧 的 偏 移 。 
scrollTop() 设置 或 返回 匹配 元 素 相对 滚动 条 项 部 的 偏 移 。 
width() 设置 或 返回 匹配 元 素 的 宽度 。 

参阅 


教程 : CSS 教程 
参考 手册 : <a href=">CSS 参考 手册 </a> 


jQuery CSS 操作 - css() 方法 
例 


设置 <p> 元 素 的 颜色 : 


将 


$(".btn1i").click(function(){ 
$("p").css("color", "red"); 


定义 和 用 法 


css() 方法 返回 或 设置 匹配 的 元 素 的 一 个 或 多 个 样式 属性 。 


返回 CSS 属性 值 


返回 第 一 个 匹配 元 素 的 CSS 属性 值 。 
注释 : 当 用 于 返回 一 个 值 时 ， 不 支持 简写 的 CSS 属性 (比如 "background" 和 "border") 。 


$(_selector_).css(_name_ ) 


参数 描述 


name ， 必需。 规定 CSS 属性 的 名 称 。 该 参数 可 包含 任何 CSS 属性 。 比 如 "color"。 


实例 
取得 第 一 个 段落 的 color 样式 属性 的 值 : 


$("p").css("color"); 


设置 CSS 属性 
设置 所 有 匹配 元 素 的 指定 CSS 属性 。 


$(_Sselector_),css(_name_，Vvalue_) 





参数 描述 
name ”必需 。 规 定 CSS 属性 的 名 称 。 该 参数 可 包含 任何 CSS 属性 ， 上 比如 "color"。 
可 选 。 规 定 CSS 属性 的 值 。 该 参数 可 包含 任何 CSS 属性 值 ， 比 如 "red"。 如 果 


Value ， 设置 了 空 字符 串 值 ， 则 从 元 素 中 删除 指定 属性 。 
实例 
实 


将 所 有 段落 的 颜色 设 为 红色 : 


$("p").css("color", "red"); 


使 用 函数 来 设置 CSS 属性 


设置 所 有 [匹配 的 元 素 中 样式 属性 的 值 。 


此 画 数 返回 要 设置 的 属性 值 。 接 受 两 个 参数 ，index 为 元 素 在 对 象 集合 中 的 素 引 位 置 ，value 
是 原先 的 属性 值 。 


$(_selector_).css(_name ,_function(index,value) ) 





参数 描述 
oe 必需 。 规 定 CSS 属性 的 名 称 。 该 参数 可 包含 任何 CSS 属性 ， 比 
如 "color"。 


规定 返回 CSS 属性 新 值 的 本 数 。 index - 可 选 。 接 受 选 择 器 的 


function(index,value) index 位 置 oldvailue - 可 选 。 接 受 CSS 属性 的 当前 值 。 


实例 1 
将 所 有 段落 的 颜色 设 为 红色 : 


$("button").click(function(){ 
$("p").css("color",function(){return "red";}); 


小 


实例 2 


逐渐 增加 div 的 宽度 : 


$("div").click(function() { 
$(this).css( 
"width", function(index, value) {return parseFloat(value) * 1.2;} 
); 
}); 


设置 多 个 CSS 属性 / 值 对 


$(_selector_).css({_property:value_, _property:value , ...}) 


把 “名 / 值 对 ?对 象 设置 为 所 有 匹配 元 素 的 样式 属性 。 
这 是 一 种 在 折 有 匹配 的 元 素 上 设置 大 量 祥 式 属 性 的 最 佳 方式 。 


实例 
$("p").css({ 


"color":"white", 
"background-color":"#98bf21", 
"font-family":"Arial", 
"font-size":"20px", 
"padding":"5px" 

}); 


jQuery CSS 操作 - height() 方法 


实例 
设置 <p> 元 素 的 高 度 : 


$(".btn1i").click(function(){ 
$("p").height(50); 
); 


a 、 S 

定义 和 用 法 

height() 方法 返回 或 设置 匹配 元 素 的 高 度 。 

返回 高 度 

返回 第 一 个 匹配 元 素 的 高 度 。 

如 果 不 为 该 方法 设置 参数 ， 则 返回 以 像素 计 的 匹配 元 素 的 高 度 。 


语法 
$(_selector_) ,height() 
设置 高 度 


设置 所 有 匹配 元 素 的 高 度 。 


$(_selector_).height(_length_ ) 


参数 描述 


length ”可 选 。 规 定 元 素 的 高 度 。 如 果 没 有 规定 长 度 单位 ， 则 使 用 默认 的 px 单位 。 


使 用 范 数 来 设置 高 度 


使 用 函数 来 设置 所 有 匹配 元 素 的 高 度 。 
语法 


$(_selector_).height(_function(index,oldheight) ) 


参数 描述 


规定 返回 被 选 元 素 新 高 度 的 函数 。 index - 可 选 。 接 受 选 择 


funciion(index,oldheigny | 器 的 index 位 菠 是 - 可 选 。 接 受 选择 器 的 当前 值 。 


亲 目 试 一 试 - 实例 

获得 文档 和 窗口 元 素 的 高 度 

使 用 height() 方法 来 获得 document 和 window 元 素 的 当前 高 度 。 
使 用 em 和 % 值 来 设置 高 度 

使 用 指定 的 长 度 单位 来 设置 元 素 的 高 度 。 


油 


jQuery CSS 操作 - offset() 方法 


获得 <p> 元 素 当前 的 偏 移 : 


$(".btn1i").click(function(){ 
x=$("p").offset(); 
$("#spani").text(x.1eft); 
$("#span2").text(x.top); 


定义 和 用 法 
offset() 方法 返回 或 设置 匹配 元 素 相对 于 文档 的 偏 移 (位 置 ) 。 
返回 偏 移 坐 标 


返回 第 一 个 匹配 元 素 的 偏 移 坐 标 。 
该 方法 返回 的 对 象 包含 两 个 整 型 属性 : top 和 left， 以 像素 计 。 此 方法 只 对 可 见 元 素 有 效 。 


语法 


$(_selector_).offset() 


设置 偏 移 坐 标 
设置 所 有 匹配 元 素 的 偏 移 坐 标 。 
语法 
$(_selector_).offset(_value ) 


参数 描述 


value ， 必需 。 规 定 以 像素 计 的 top 和 left 坐标 。 可 能 的 值 : 值 对 ， 比 如 
{top:100,left:0} ; 带 有 top 和 left 属性 的 对 象 。 


使 用 函数 来 设置 偏 移 坐 标 

使 用 函数 来 设置 所 有 匹配 元 素 的 偏 移 坐 标 。 

语法 
$(_selector_).offset(_function(index,oldoffset) ) 


描述 


规定 返回 被 选 元 素 新 偏 移 坐 标的 函数 。 index - 可 选 。 接 受 
选择 器 的 index 位 置 oldvalue - 可 选 。 接 受 选 择 器 的 当前 坐 


参数 
function(index,oldoffset) 
标 。 
亲 目 试 一 试 - 实例 
使 用 对 象 来 为 对 象 设置 新 的 offset 值 


使 用 新 对 象 中 的 坐标 来 定位 元 素 。 
使 用 另 一 个 元 素 的 位 置 来 为 元 素 设置 新 的 offset 值 


使 用 已 有 对 象 的 位 置 来 定位 元 素 。 


jQuery CSS 操作 - offsetParent() 方法 


将 | 


实例 
设置 最 近 的 祖先 定位 元 素 的 背景 颜色 : 


$("button").click(function(){ 
$("p").offsetPparent().css("background-color", "red"); 


}); 


1 ~ N 

offsetParent() 方法 返回 最 近 的 祖先 定位 元 素 。 

定位 元 素 指 的 是 元 素 的 CSS position 属性 被 设置 为 relative、absolute 或 fixed 的 元 素 。 
可 以 通过 jQuery 设置 position， 或 者 通过 CSS 的 position 属性 。 

语法 


$(_selector_).offsetPparent() 


jQuery CSS 操作 - position() 方法 


例 


获得 <p> 元 素 的 当前 位 置 : 


将 


$(".btn1i").click(function(){ 
x=$("p").position(); 
$("#spani").text(x.1eft); 
$("#span2").text(x.top); 


ce 、 : 
position() 方法 返回 匹配 元 素 相 对 于 父 元 素 的 位 置 ( 偏 移 ) 。 
该 方法 返回 的 对 象 包含 两 个 整 型 属性 : top 和 left， 以 像素 计 。 
此 方法 只 对 可 见 元 素 有 效 。 

语法 


$(_selector_).position() 


jQuery CSS 操作 - scrollLeft() 方法 


例 


设置 <div> 元 素 中 滚动 条 的 水 平 偏 移 : 


将 


$(".btn1i").click(function(){ 
$("div").scrollLeft(100); 


二 、 : 
定义 和 用 法 
scrollLeft() 方法 返回 或 设置 匹配 元 素 的 滚动 条 的 水 平 位 置 。 


滚动 条 的 水 平 位 置 指 的 是 从 其 左 侧 滚动 过 的 像素 数 。 当 滚动 条 位 于 最 左 侧 时 ， 位 置 是 0。 
AN ~ 六 一 Es 
返回 水 平 滚动 条 位 置 
返回 第 一 个 匹配 元 素 的 水 平 滚动 条 位 置 。 
语法 
$(_selector_).scrollLeft() 
、 ~ 六 一 1 
设置 水 平 滚动 条 位 置 
设置 所 有 匹配 元 素 的 水 平 滚动 条 位 置 。 
语法 
$(_selector_).scrollLeft(_position_) 


参数 描述 


Ea 


position 可 选 。 规 定 以 像素 计 的 新 位 置 。 


jQuery CSS 操作 - scrollTop() 方法 


实例 
设置 <div> 元 素 中 浓 动 条 的 垂直 仿 移 


$(".btn1i").click(function(){ 
$("div").scrollLeft(100); 


二 、 : 
scrollTop() 方法 返回 或 设置 匹配 元 素 的 滚动 条 的 垂直 位 置 。 
scroll top offset 指 的 是 滚动 条 相对 于 其 项 部 的 偏 移 。 


如 果 该 方法 未 设置 参数， 则 返回 以 像素 计 的 相对 滚动 条 顶部 的 偏 移 。 
语法 


$(_selector_).scrollTop(_offset_) 


参数 描述 
offset 可 选 。 规 定 相 对 滚动 条 顶部 的 偏 移 ， 以 像素 计 。 


日 一 Ne mE 
提示 和 壮 释 
注释 : 该 方法 对 于 可 见 元 素 和 不 可 见 元 素 均 有 效 。 
注释 : 当 用 于 获取 值 时 ， 该 方法 只 返回 第 一 个 匹配 元 素 的 scroll top offset。 


注释 : 当 用 于 设置 值 时 ， 该 方法 设置 所 有 匹配 元 素 的 scroll top offset。 


亲 目 试 一 试 - 实例 
获得 当前 的 scroll top offset 


使 用 scrollTop() 方法 获得 scroll top offset。 


jQuery CSS 操作 - width() 方法 


实例 
设置 <p> 元 素 的 宽度 : 


$(".btn1i").click(function(){ 
$("p").width(200); 


定义 和 用 法 
width() 方法 返回 或 设置 匹配 元 素 的 宽度 。 
返回 宽度 


返回 第 一 个 匹配 元 素 的 宽度 。 
如 果 不 为 该 方法 设置 参数 ， 则 返回 以 像素 计 的 匹配 元 素 的 宽度 。 


语法 


$(_selector_) ,width() 


、 Ce 

设置 宽度 

设置 所 有 匹配 元 素 的 宽度 。 

语法 
$(_selector_).width(_length_ ) 


参数 描述 


length ”可 选 。 规 定 元 素 的 宽度 。 如 果 没 有 规定 长 度 单位 ， 则 使 用 默认 的 px 单位 。 


使 用 画 数 来 设 


大 
EE 
册 


使 用 画 数 来 设置 所 有 匹配 元 素 的 宽度 。 
语法 


$(_selector_).width(_function(index,oldwidth) ) 


参数 描述 


规定 返回 被 选 元 素 新 宽度 的 男 数 。 index - 可 选 。 接 受 选择 


funciion(index,oldwiath) | 器 的 index 位 置 ET - 可 选 。 接 受 选择 器 的 当前 值 。 


亲自 试 一 试 - 实例 

获得 文档 和 窗口 元 素 的 宽度 

使 用 width() 方法 来 获得 document 和 window 元 素 的 当前 宽度 。 
使 用 em 和 % 值 来 设置 宽度 

使 用 指定 的 长 度 单 位 来 设置 元 素 的 宽度 。 


jQuery 参考 手册 - Ajax 


jQuery Ajax 操作 函数 


jQuery 库 拥有 完整 的 Ajax 兼容 套件 。 其 中 的 函数 和 方法 允许 我 们 在 不 刷新 浏览 器 的 情况 下 从 
服务 器 加 载 数据 。 


本 数 描述 
jQuery.ajax() 执行 异步 HTTP (Ajax) 请 求 。 
.ajaxComplete() 当 Ajax 请 求 完 成 时 注册 要 调用 的 处 理 程序 。 这 是 一 个 Ajax 事件 。 
i 0 误 时 注册 要 调用 的 处 理 程序 。 这 是 一 个 
.ajaxSend() 在 Ajax 请 求 发 送 之 前 显示 一 条 消息 。 


jQuery.ajaxSetup() ”设置 将 来 的 Ajax 请 求 的 默认 值 。 


RS 3 i 请 求 完成 开始 时 注册 要 调用 的 处 理 程序 。 这 是 一 个 


.ajaxStop() Ra Ajax 请 求 完成 时 注册 要 调用 的 处 理 程序 。 这 是 一 个 Ajax 事 


.ajaxSuccess() 当 Ajax 请 求 成 功 完成 时 显示 一 条 消息 。 
jQuery.get() 使 用 HTTP GET 请 求 从 服务 器 加 载 数 据 。 


jQuery.getJSON() ”使 用 HTTP GET 请 求 从 服务 器 加 载 JSON 编码 数据 。 


bawastESiatn HTTP GET 请 求 从 服务 器 加 载 JavaScript 文件 ， 然 后 执行 该 


.load() 从 服务 器 加 载 数 据 ， 然 后 把 返回 到 HTML 放 入 匹配 元 素 。 


和 RE 适合 在 URL 查询 字符 串 或 Ajax 请 


jQuery.post() 使 用 HTTP POST 请 求 从 服务 器 加 载 数据 。 
.serialize() 将 表单 内 容 序列 化 为 字符 串 。 


.SerializeArray() 序列 化 表单 元 素 ， 返 回 JSON 数据 结构 数据 。 


参阅 


教程 : Ajax 教程 


jQuery ajax - ajax() 方法 
实例 


通过 AJAX 加 载 一 段 文 本 : 
jQuery 代码 : 


$(document ) ,ready(function(){ 
$("#b01") ,clLick(function(){ 
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false}); 
$("#myDiv").html(htmlobj.responseText); 
}); 

}); 


HTML 代码 : 


<div id="myDiv"><h2>Let AJAX change this text</h2></div> 
<button id="b01" type="button">Change Content</button> 


定义 和 用 法 
ajax() 方法 通过 HTTP 请 求 加 载 远程 数据 。 


该 方法 是 jQuery 底层 AJAX 实现 。 简 单 易 用 的 高 层 实现 见 $.get, $.post 等 。$.ajax() 返回 其 
创建 的 XMLHttpRequest 对 象 。 大 多 数 情 况 下 你 无 需 直 接 操 作 该 函数 ， 除 非 你 需要 操作 不 常 
用 的 选项 ， 以 获得 更 多 的 灵活 性 。 


最 简单 的 情况 下 ，$.ajax() 可 以 不 带 任何 参数 直接 使 用 。 
注意 : 所 有 的 选项 都 可 以 通过 $.ajaxSetup() 函数 来 全 局 设置 。 


语法 


jQuery.ajax([_settings_]) 


参数 
tti 可 选 。 用 于 配置 Ajax 请 求 的 键 值 对 集合 。 可 以 通过 $.ajaxSetup() 设置 任何 选 
Se gs | 项 的 默认 值 。 


options 

类 型 : Object 

可 选 。AJAX 请 求 设 置 。 所 有 选项 都 是 可 选 的 。 
async 

类 型 : Boolean 


默认 值 : true。 默 认 设置 下， 所 有 请 求 均 为 异步 请 求 。 如 果 需 要 发 送 同步 请 求 ， 请 将 此 选项 设 
置 为 false。 


注意 ， 同 步 请 求 将 锁 住 浏览 器 ， 用 户 其 它 操 作 必 须 等 待 请 求 完 成 才 可 以 执行 。 
beforeSend(XHR) 

类 型 : Function 

发 送 请 求 前 可 修改 XMLHttpRequest 对 象 的 函数 ， 如 添加 自 定 义 HTTP 头 。 
XMLHttpRequest 对 象 是 唯一 的 参数 。 

这 是 一 个 Ajax 事件 。 如 果 返 回 false 可 以 取消 本 次 ajax 请 求 。 

cache 

类 型 : Boolean 

默认 值 : true，dataType 为 script 和 jsonp 时 默认 为 false。 设 置 为 false 将 不 缓存 此 页 面 。 
jQuery 1.2 新 功能 。 

complete(XHR, TS) 

类 型 : Function 

请 求 完 成 后 回调 男 数 (请 求 成 功 或 失败 之 后 均 调用 )。 

参数 : XMLHttpRequest 对 象 和 一 个 描述 请 求 类 型 的 字符 串 。 

这 是 一 个 Ajax 事件 。 

contentType 

类 型 : String 

默认 值 : "application/x-www-form-urlencoded"。 发 送信 息 至 服务 器 时 内 容 编码 类 型 。 


默认 值 适 合 大 多 数 情况 。 如 果 你 明确 地 传递 了 一 个 content-type 给 $.ajax() 那么 它 必 定 会 发 
送 给 服务 器 (即使 没有 数据 要 发 送 ) 。 


Context 
类 型 : Object 


这 个 对 象 用 于 设置 Ajax 相关 回调 函数 的 上 下 文 。 也 就 是 说 ， 让 回调 范 数 内 this os 
(如 果 不 设 定 这 个 参数 ， 那 么 this 就 指向 调用 本 次 AJAX 请 求 时 传递 的 options 参数 ) 。 

如 指定 一 个 DOM 元 素 作为 context 参数 ， 这 样 就 设置 了 success 回调 图 数 的 上 下 文 为 

DOM 元 素 。 


就 像 这 样 


$.ajax({ url: "test.html", context: document.body, success: function(){ 
$(this).addclass("done"); 
}}); 


data 
类 型 : String 


发 送 到 服务 器 的 数据 。 将 自动 转换 为 请 求 字 符 串 格式 。GET 请 求 中 将 附加 在 URL 后 。 查 看 
processData 选项 说 明 以 禁止 此 自动 转换 。 必 须 为 Key/Value 格式 。 如 果 为 数组 ，jQuery 将 
自动 为 不 同 值 对 应 同一 个 名 称 。 如 {foo:["bar1", "bar2"]} 转换 为 '&foo=bar1&foo=bar2'。 


dataFilter 
类 型 : Function 


给 Ajax 返回 的 原始 数据 的 进行 预 处 理 的 函数 。 提 供 data 和 type 两 个 参数 : data 是 Ajax 返 
回 的 原始 数据 type 是 调用 jQuery.ajax 时 提供 的 dataType 参数 。 画 数 返 回 的 值 业 由 jQuery 
一 步 处 理 。 


dataType 
类 型 : String 


预期 服务 器 返回 的 数据 类 型 。 如 果 不 指定 ，jQuery 将 自动 根据 HTTP 包 MIME 信息 来 智能 判 

断 ， 比 如 XML MIME 类 型 就 被 识别 为 XML。 在 1.4 中 ，JSON 就 会 生成 一 个 JavaScript 对 

象 ， 而 script 则 会 执行 这 个 脚本 。 随 后 服务 器 端 返回 的 数据 会 根据 这 个 值 解 析 后 ， 传 递 给 回 
豆 数 。 可 用 值 : 


e "xml": 返回 XML 文档 ， 可 用 jQuery 处 理 。 

e "html": 返回 纯 文本 HTML 信息 ; 包含 的 script 标签 会 在 插入 dom 时 执行 。 

e "script": 返回 纯 文本 JavaScript 代码 。 不 会 自动 缓存 结果 。 除 非 设 置 了 "cache" 参数 。 注 
意 : 在 远程 请 求 时 (不 在 同一 个 域 下 )， 所 有 POST 请 求 都 将 转 为 GET 请 求 。 (因为 将 使 
用 DOM 的 script 标 签 来 加 载 ) 

e。 "json": 返回 JSON 数据 。 

。 "jsonp": JSONP 格式 。 使 用 JSONP 形式 调用 画 数 时 ， 如 "myurl?callback=?" jQuery 将 


自动 蔡 换 ? 为 正确 的 函数 名 ， 以 执行 回调 男 数 。 
e "text": 返回 纯 文本 字符 串 


error 

类 型 : Function 

默认 值 : 自动 判断 (xml 或 html)。 请 求 失败 时 调用 此 画 数 。 

有 以 下 三 个 参数 : XMLHttpRequest 对 象 、 错 误 信息 、 (可 选 ) 捕获 的 异常 对 象 。 


如 果 发 生 了 错误 ， 错 误 信息 (第 二 个 参数 ) 除了 得 到 null 之 外 ， 还 可 能 是 "timeout", "error", 
"notmodified" 和 "parsererror"。 


这 是 一 个 Ajax 事件 。 
global 
类 型 : Boolean 


是 否 触 发 全 局 AJAX 事件 。 黑 认 值 : true。 设 置 为 false 将 不 会 触发 全 局 AJAX 事件 ， 如 
ajaxStart 或 ajaxStop 可 用 于 控制 不 同 的 Ajax 事件 。 


ifModified 
类 型 : Boolean 


仅 在 服务 器 数据 改变 时 获取 新 数据 。 默 认 值 : false。 使 用 HTTP 包 Last-Modified 头 信息 判 
断 。 在 jQuery 1.4 中 ， 它 也 会 检查 服务 器 指定 的 'etag' 来 确定 数据 没有 被 修改 过 。 


jsonp 
类 型 : String 


在 一 个 jsonp 请 求 中 重 写 回 调 玉 数 的 名 字 。 这 个 值 用 来 替代 在 "callback=?" 这 种 GET 或 
POST 请 求 中 URL 参数 里 的 "callback" 部 分 ， 上 比如 {jsonp:'onJsonPLoad'} 会 导致 将 
"onJsonPLoad=?" 传 给 服务 器 。 


jsonpCallback 
类 型 : String 


为 jsonp 请 求 指 定 一 个 回调 娘 数 名 。 这 个 值 将 用 来 取代 jQuery 自动 生成 的 随机 画 数 名 。 这 主 
要 用 来 让 jQuery 生成 度 独特 的 函数 名 ， 这 样 管理 请 求 更 容易 ， 也 能 方便 地 提供 回调 函数 和 错 
误 处 理 。 你 也 可 以 在 想 让 浏览 器 缓存 GET 请 求 的 时 候 ， 指 定 这 个 回调 男 数 名 。 


password 


类 型 : String 


用 于 响应 HTTP 访问 认证 请 求 的 密码 
processData 
类 型 : Boolean 


默认 值 : true。 黑 认 情 况 下 ， 通 过 data 选 项 传递 进来 的 数据 ， 如 果 是 一 个 对 象 (技术 上 讲 只 要 不 
是 字符 串 )， 都 会 义理 转 化 成 一 个 查询 字符 串 ， 以 配合 默认 内 容 类 型 "application/x-www-form- 
urlencoded"。 如 果 要 发 送 DOM 树 信息 或 其 它 不 希望 转换 的 信息 ， 请 设置 为 false。 


ScriptCharset 
类 型 : String 


只 有 当 请 求 时 dataType 为 "jsonp" 或 "script"， 并 且 type 是 "GET" 才 会 用 于 强制 修改 
charset。 通 常 只 在 本 地 和 远程 的 内 容 编码 不 同时 使 用 。 


Success 
类 型 : Function 

请 求 成 功 后 的 回调 图 数 。 

参数 : 由 服务 器 返回 ， 并 根据 dataType 参数 进行 处 理 后 的 数据 ; 描述 状态 的 字符 串 。 
这 是 一 个 Ajax 事件 。 

traditional 

类 型 : Boolean 


如 果 你 想 要 用 传统 的 方式 来 序列 化 数据 ， 那 么 就 设置 为 true。 请 参考 工具 分 类 下 面 的 
jQuery.param 方法 。 


timeout 

类 型 : Number 

设置 请 求 超时 时 间 (毫秒 ) 。 此 设置 将 履 盖 全 局 设置 。 
type 

类 型 : String 


默认 值 : "GET'")。 请 求 方式 ("POST'" 或 "GET")， 默认 为 "GET'"。 注 意 : 其 它 HTTP 请 求 方 
法 ， 如 PUT 和 DELETE 也 可 以 使 用 ， 但 仅 部 分 浏览 器 支持 。 


url 


类 型 : String 


默认 值 : 当前 页 地 址 。 发 送 请 求 的 地 址 。 
username 

类 型 : String 

用 于 响应 HTTP 访问 认证 请 求 的 用 户 名 。 
xhr 

类 型 : Function 


需要 返回 一 个 XMLHttpRequest 对 象 。 默 认 在 IE 下 是 ActiveXObject 而 其 他 情况 下 是 
XMLHttpRequest 。 用 于 重 写 或 者 提供 一 个 增强 的 XMLHttpRequest 对 象 。 这 个 参数 在 
jQuery 1.3 以 前 不 可 用 。 


回调 函数 


如 果 要 处 理 $.ajax() 得 到 的 数据 ， 则 需要 使 用 回调 函数 : beforeSend、error、dataFilter、 
success、complete。 


beforeSend 


在 发 送 请 求 之 前 调用 ， 并 且 传 入 一 个 XMLHttpRequest 作为 参数 。 


error 


在 请 求 出 错时 调用 。 传 入 XMLHttpRequest 对 象 ， 描 述 错误 类 型 的 字符 串 以 及 一 个 异常 对 象 
(如 果 有 的 话 ) 


dataFilter 


在 请 求 成 功 之 后 调用 。 ee "dataType" 参数 的 值 。 并 且 必 须 返 回 新 的 数据 
(可 能 是 处 理 过 的 ) 传递 给 success 回调 函数 。 


SUCCesSsS 


当 请 求 之 后 调用 。 传 人 返回 后 的 数据 ， 以 及 包含 成 功 代码 的 字符 串 。 


complete 


当 请 求 完成 之 后 调用 这 个 函数 ， 无 论 成 功 或 失败 。 传 人 XMLHttpRequest 对 象 ， 以 及 一 个 包 
含 成 功 或 错误 代码 的 字符 串 。 


效 据 类 型 


$.ajax() 画 数 依 赖 服务 器 提供 的 信息 来 处 理 返 回 的 数据 。 如 果 服 务 器 报告 说 返回 的 数据 是 
XML， 那 么 返回 的 结果 就 可 以 用 普通 的 XML 方法 或 者 jQuery 的 选择 器 来 通 万 。 如 果 见 得 到 
其 他 类 型 ， 比 如 HTML， 则 数据 就 以 文本 形式 来 对 待 。 


通过 dataType 选项 还 可 以 指定 其 他 不 同 数 据 处 理 方式 。 除 了 单纯 的 XML， 还 可 以 指定 
html、json、jsonp、 script 或 者 text。 


其 中 ，text 和 xml 类 型 返回 的 数据 不 会 经 过 人 处理。 数据 仅仅 简单 的 籽 XMLHttpRequest 的 
responseText 或 responseHTML 属性 传递 给 success 回调 图 数 。 


注意 : 我 们 必须 确保 网 页 服务 器 报告 的 MIME 类 型 与 我 们 选择 的 dataType 所 匹配 。 比 如 说 ， 
XML 的 话 ， 服 务 器 端 就 必须 声明 text/xml 或 者 application/xml 来 获得 一 致 的 结果 。 


如 果 指 定 为 html 类 型 ， 任 何 内 典 的 JavaScript 都 会 在 HTML 作为 一 个 字符 串 返 回 之 前 执行 。 


类 似 地 ， 指 定 script 类 型 的 话 ， 也 会 先 执行 服务 器 端 生成 JavaScript， 然 后 再 把 脚本 作为 一 个 
文本 数据 返回 。 


如 果 指 定 为 json 类 型 ， 则 会 把 获取 到 的 数据 作为 一 个 JavaScript 对 象 来 解析 ， 并 且 把 构建 好 
的 对 象 作为 结果 返回 。 为 了 实现 这 个 目的 ， 它 首先 党 试 使 用 JSON.parse()。 如 果 浏 览 器 不 支 
持 ， 则 使 用 一 个 函数 来 构建 。 


JSON 数据 是 一 种 能 很 方便 通过 JavaScript 解析 的 结构 化 数据 。 如 果 获 取 的 数据 文件 存放 在 
远程 服务 器 上 (域名 不 同 ， 也 就 是 跨 域 获取 数据 ) ， 则 需要 使 用 jsonp 类 型 。 使 用 这 种 类 型 
的 话 ， 会 创建 一 个 查询 字符 串 参数 callback=? ， 这 个 参数 会 加 在 请 求 的 URL 后 面 。 服 务 器 端 
应 当 在 JSON 数据 前 加 上 回调 函数 名 ， 以 便 完成 一 个 有 效 的 JSONP 请 求 。 如 果 要 指定 回调 
函数 的 参数 名 来 取代 默认 的 callback， 可 以 通过 设置 $.ajax() 的 jsonp 参数 。 


注意 : JSONP 是 JSON 格式 的 扩展 。 它 要 求 一 些 服务 器 端的 代码 来 检测 并 义理 查询 字符 串 参 
数 。 


如 果 指 定 了 script 或 者 jsonp 类 型 ， 那 么 当 从 服务 器 接收 到 数据 时 ， 实 际 上 是 用 了 <script> 
标签 而 不 是 XMLHttpRequest 对 象 。 这 种 情况 下 ，$.ajax() 不 再 返回 一 个 XMLHttpRequest 对 
象 ， 并 且 也 不 会 传递 事件 义理 函数 ， 比 如 beforeSend。 


、 ~ a 口 
发 送 数据 到 服务 器 
默认 情况 下 ，Ajax 请 求 使 用 GET 方法 。 如 果 要 使 用 POST 方法 ， 可 以 设 定 type 参数 值 。 这 
个 选项 也 会 影响 data 选项 中 的 内 容 如 何 发 送 到 服务 器 。 


data 选项 既 可 以 包含 一 个 查询 字符 串 ， 比 如 key1=value1&key2=value2 ， 也 可 以 是 一 个 映 
射 ， 比 如 {key1: value1', key2: value2'} 。 如 果 使 用 了 后 者 的 形式 ， 则 数据 再 发 送 器 会 被 转换 
成 查询 字符 串 。 这 个 处 理 过 程 也 可 以 通过 设置 processData 选项 为 false 来 回避 。 如 果 我 们 希 


望 发 送 一 个 XML 对 象 给 服务 器 时 ， 这 种 义理 可 能 并 不 合适 。 并 且 在 这 种 情况 下 ， 我 们 也 应 当 
改变 contentType 选项 的 值 ， 用 其 他 合适 的 MIME 类 型 来 取代 默认 的 application/x-www- 
form-urlencoded 。 


高 级 选项 


global 选项 用 于 阻止 响应 注册 的 回调 函数 ， 上 比如 .ajaxSend， 或 者 ajaxError， 以 及 类 似 的 方 
法 。 这 在 有 些 时 候 很 有 用 ， 比 如 发 送 的 请 求 非常 频繁 且 简 短 的 时 候 ， 就 可 以 在 ajaxSend 里 禁 
用 这 个 。 


如 果 服 务 器 需要 HTTP 认证 ， 可 以 使 用 用 户 名 和 密码 可 以 通过 username 和 password 选项 
来 设置 。 


Ajax 请 求 是 限时 的 ， 所 以 错误 警告 被 捕获 并 义理 后 ， 可 以 用 来 提升 用 户 体 验 。 请 求 超时 这 个 
参数 通常 就 保留 其 默认 值 ， 要 不 就 通过 jQuery.ajaxSetup 来 全 局 设 定 ， 很 少 为 特定 的 请 求 重 
新 设置 timeout 选项 。 


默认 情况 下 ， 请 求 总 会 被 发 出 去 ， 但 浏览 器 有 可 能 从 它 的 缓存 中 调 取 数 据 。 要 禁止 使 用 缓存 
的 结果 ， 可 以 设置 cache 参数 为 false。 如 果 希 望 判断 数据 自从 上 次 请 求 后 没有 更 改过 就 报告 
出 错 的 话 ， 可 以 设置 ifModified 为 true。 


scriptCharset 人 允许 给 <script> 标签 的 请 求 设 定 一 个 特定 的 字符 集 ， 用 于 script 或 者 jsonp 类 
似 的 数据 。 当 脚本 和 页 面 字 符 集 不 同时 ， 这 特别 好 用 。 


Ajax 的 第 一 个 字母 是 asynchronous 的 开头 字母 ， 这 意味 着 所 有 的 操作 都 是 并 行 的 ， 完 成 的 
顺序 没有 前 后 关系 。$.ajax() 的 async 参数 总 是 设置 成 true， 这 标志 着 在 请 求 开 始 后 ， 其 他 代 
码 依然 能 够 执行 。 强 烈 不 建议 把 这 个 选项 设置 成 false， 这 意味 着 所 有 的 请 求 都 不 再 是 异步 的 
了 ， 这 也 会 导致 浏览 器 被 锁 死 。 


$.ajax 画 数 返回 它 创 建 的 XMLHttpRequest 对 象 。 通 常 jQuery 只 在 内 部 处 理 并 创建 这 个 对 
象 ， 但 用 户 也 可 以 通过 xhr 选项 来 传递 一 个 自己 创建 的 xhr 对 象 。 返 回 的 对 象 通 常 已 经 被 去 弃 
了 ， 但 依然 提供 一 个 底层 接口 来 观察 和 操控 请 求 。 比 如 说 ， 调 用 对 象 上 的 .abort() 可 以 在 请 求 
完成 前 挂 起 请 求 。 


jQuery ajax - ajaxComplete() 方法 


7 

实例 

当 AJAX 请 求 正在 进行 时 显示 “正在 加 载 "的 指示 : 
$("#txt") .ajaxStart(function(){ 


$("#wait").css("display","block"); 


$("'#txt").ajaxcomplete(function( ){ 
$("#wait").css("display", "none"); 


}); 


中 、 : 

定义 和 用 法 

ajaxComplete() 方法 在 AJAX 请 求 完 成 时 执行 画 数 。 它 是 一 个 Ajax 事件 。 
方 


与 ajaxSuccess() 不 同 ， 通 过 ajaxComplete() 方法 规定 的 函数 会 在 请 求 完 成 时 运行 ， 即 使 请 


求 并 未 成 功 。 
语法 
.jQueryajaxComplete(_function(event, xhr,options)_) 


参数 描述 


必需 。 规 定 当 请 求 完 成 时 运行 的 画 数 。 人 额外 的 参数 : event 
function(event,xhr,options) ，- 包含 event 对 象 xhr - 包含 XMLHttpRequest 对 象 
options -包含 AJAX 请 求 中 使 用 的 选项 


详细 说 明 


XMLHttpRequest 对 象 和 设置 作为 参数 传递 给 回调 本 数 。 


jQuery ajax - ajaxError() 方法 


实例 
当 AJAX 请 求 失败 时 ， 触 发 提示 框 : 


$("div").ajaxError(function(){ 
alert("An error occurred!"); 


}); 


mm 、 ~ 
ajaxError() 方法 在 AJAX 请 求 发 生 错 误 时 执行 函数 。 它 是 一 个 Ajax 事件 。 
语法 

.ajaxError(_function(event, xhr,options, exc)_) 


参数 描述 


必需 。 规 定 当 请 求 失败 时 运行 的 函数 。 领 外 的 参数 : 

event - 包含 event 对 象 xhr- 包含 XMLHttpRequest 
对 象 options - 包含 AJAX 请 求 中 使 用 的 选项 exc - 包 
合 JavaScript exception 


function(event,xhr,options, exc) 


详细 说 明 


XMLHttpRequest 对 象 和 设置 作为 参数 传递 给 回调 范 数 。 捕 捉 到 的 错误 可 作为 最 后 一 个 参数 传 
递 : 


function (event, XMLHttpRequest, ajaxOptions, thrownError) { 
// thrownError 只 有 当 异 常 发 生 时 才 会 被 传递 this; 
} 


亲自 试 一 试 - 实例 
使 用 xhr 和 options 参数 


如 何 使 用 options 参数 来 获得 更 有 用 的 错误 消息 。 


jQuery ajax - ajaxSend() 方法 


实例 
当 AJAX 请 求 即将 发 送 时 ， 改 变 div 元 素 的 内 容 : 


$("div").ajaxSsend(function(e,xhr,opt){ 
$(this).html("Requesting " + opt.ur]l); 
}); 


Et ~ N 
ajaxSend() 方法 在 AJAX 请 求 开 始 时 执行 画 数 。 它 是 一 个 Ajax 事件 。 
语法 


.ajaxSend([_function(event, xhr,options)_]) 


参数 描述 


必需 。 规 定 当 请 求 开始 时 执行 画 数 。 额 外 的 参数 : event - 
function(event,xhr,options) ”包含 event 对 象 xhr - 包 仿 XMLHttpRequest 对 象 options 
- 包含 AJAX 请 求 中 使 用 的 选项 


详细 说 明 


XMLHttpRequest 对 象 和 设置 作为 参数 传递 给 回调 函数 。 


jQuery ajax - ajaxSetup() 方法 


/> 
实例 
为 所 有 AJAX 请 求 设置 默认 URL 和 success 加 数 : 


$("button").click(function(){ 
$.ajaxSetup({url:"demo ajax_load.txt", success:function(result){ 
$("div").html(result);}}); 
$.ajax( ); 
}); 


二 、 
jQuery.ajaxSetup() 方法 设置 全 局 AJAX 默认 选项 。 
语法 


jQuery.ajaxSetup(_name:value , _name:value , ...) 


示例 


设置 AJAX 请 求 默 认 地 址 为 "xmlhttp/"， 禁 止 触发 全 局 AJAX 事件 ， 用 POST 代 蔡 默认 GET 
方法 。 其 后 的 AJAX 请 求 不 再 设置 任何 选项 参数 : 


$.ajaxSetup({ 
url: "/xmlhttp/", 
global: false, 
type: "POST" 


}); 
$.ajax({ data: myData }); 


参数 描述 
name:value 可 选 。 使 用 名 称 / 值 对 来 规定 AJAX 请 求 的 设置 。 


注释 : 参数 见 '$.ajax' 说 明 。 


jQuery ajax - ajaxStart() 方法 


实例 
当 AJAX 请 求 开始 时 ， 显 示 “ 加 载 中 "的 指示 : 


$("div").ajaxSstart(function(){ 
$(this).html("<img src='demo wait.gif' />"); 
}); 


Et ~ Ny 

ajaxStart() 方法 在 AJAX 请 求 发 送 前 执行 画 数 。 它 是 一 个 Ajax 事件 。 

详细 说 明 

无 论 在 何 时 发 送 Ajax 请 求 ，jQuery 都 会 检查 是 否 存 在 其 他 Ajax 请 求 。 如 果 不 存在 ， 则 
jQuery 会 触发 该 ajaxStart 事件 。 在 此 时 ， 由 .ajaxStart() 方法 注册 的 任何 函数 都 会 被 执行 。 
语法 


.ajaxStart(_function()_) 


参数 描述 
function() 规定 当 AJAX 请 求 开 始 时 运行 的 函数 。 


示例 
AJAX 请 求 开 始 时 显示 信息 : 


$("#1loading").ajaxSstart(function(){ 
$(this).show(); 
}); 


jQuery ajax - ajaxStop() 方法 


实例 
当 所 有 AJAX 请 求 完成 时 ， 触 发 一 个 提示 框 : 


$("div").ajaxSstop(function(){ 
alert(" 所 有 AJAX 请 求 已 完成 " ) ， 


a > 

ajaxStop() 方法 在 AJAX 请 求 结束 时 执行 画 数 。 它 是 一 个 Ajax 事件 。 

详细 说 明 

无 论 Ajax 请 求 在 何 时 完成 ，jQuery 都 会 检查 是 否 存在 其 他 Ajax 请 求 。 如 果 不 存在 ， 则 


jQuery 会 触发 该 ajaxStop 事件 。 在 此 时 ， 由 .ajaxStop() 方法 注册 的 任何 函数 都 会 被 执行 。 


语法 


,ajaxStop(_function()_) 


参数 描述 
functionf) 规定 当 AJAX 请 求 完 成 时 运行 的 画 数 。 


示例 
AJAX 请 求 结束 后 隐藏 信息 : 


$("#1loading").ajaxSstop(function(){ 
$(this).hide( ); 


了 


jQuery ajax - ajaxSuccess() 方法 


实例 
当 AJAX 请 求 成 功 完成 时 ， 触 发 提示 杠 : 


$("div").ajaxSuccess(function(){ 
alert("AJAX 请 求 已 成 功 完成 ") ; 
}); 


定义 和 用 法 

ajaxSuccess() 方法 在 AJAX 请 求 成 功 时 执行 画 数 。 它 是 一 个 Ajax 事件 。 
详细 说 明 

XMLHttpRequest 对 象 和 设置 作为 参数 传递 给 回调 本 数 。 

无 论 Ajax 请 求 在 何 时 成 功 完 成 ，jQuery 都 会 触发 该 ajaxSuccess 事件 。 在 此 时 ， 由 
.ajaxSuccess() 方法 注册 的 任何 函数 都 会 被 执行 。 


语法 


.ajaxSuccess(_function(event, xhr,options) ) 


参数 描述 
必需 。 规 定 当 请 求 成 功 时 运行 的 画 数 。 人 额外 的 参数 : event 
function(event,xhr,options) ， -包含 event 对 象 xhr - 包含 XMLHttpRequest 对 象 
options - 包含 AJAX 请 求 中 使 用 的 选项 


示例 
AJAX 请 求 成 功 后 显示 消息 : 


$("#msg").ajaxSuccess(function(evt, request, settings)t{ 
$(this).append("<p> 请 求 成 功 !</p>"); 
}); 


jQuery ajax - get() 方法 


实例 
使 用 AJAX 的 GET 请 求 来 改变 div 元 素 的 文本 : 


$("button").click(function(){ 
$.get("demo ajax_load.txt", function(result)t{ 
$("div").html(result); 
}); 
}); 


a 、 3 
get() 方法 通过 远程 HTTP GET 请 求 载 人 信息 。 


这 是 一 个 简单 的 GET 请 求 功能 以 取代 复杂 $.ajax 。 请 求 成 功 时 可 调用 回调 函数 。 如 果 需 要 在 
出 错时 执行 画 数 ， 请 使 用 $.ajax。 


语法 


$(_selector_).get(_url ,_data ,_success(response,status,xhr)_,_dataType_) 





参数 描述 
url 必需 。 规 定 将 请 求 发 送 的 哪个 URL。 
da 要 可 选 。 规 定 连 同 请 求 发 送 到 服务 器 的 数据 。 


可 选 。 规 定 当 请 求 成 功 时 运行 的 本 数 。 额 外 的 参数 : 
success(response, status,xhr) ”response - 包含 来 自 请 求 的 结果 数据 status - 包含 请 求 
的 状态 xhr - 包含 XMLHttpRequest 对 象 


可 选 。 规 定 预 计 的 服务 器 响应 的 数据 类 型 。 默 认 地 ， 


dataType jQuery 将 智能 判断 。 可 能 的 类 型 : "xml" "html" "text" 
"Script "json" "jsonp" 
详细 说 明 


该 图 数 是 简写 的 Ajax 函数 ， 等 价 于 : 


$.ajax({ 
(Ue os Ue 
data: _data_， 
success: _Success_， 
dataType: _dataType_ 


}); 


根据 响应 的 不 同 的 MIME 类 型 ， 传 递 给 success 回调 画 数 的 返回 数据 也 有 所 不 同 ， 这 些 数据 
可 以 是 XML root 元 素 、 文 本 字符 串 、 a ee 文件 或 者 JSON 对 象 。 也 可 向 success 回调 
函数 传递 响应 的 文本 状态 。 


对 于 jQuery 1.4， 也 可 以 向 success 回调 画 数 传递 XMLHttpRequest 对 象 。 
示例 
请 求 test.php 网 页 ， 忽 略 返回 值 : 


$.get("test.php"); 


更 多 示例 
例子 1 


请 求 test.php 网 页 ， 传 送 2 个 参数 ， 忽 略 返回 值 : 


$.get("test.php", { name: "John", time: "2pm" } ) 


例子 2 
显示 test.php 返回 值 (HTML 或 XML， 取决 于 返回 值 ) : 


$.get("test,php"，function(data){ 
alert("Data Loaded: " + data); 
}); 


例子 3 
显示 test.cgi 返回 值 (HTML 或 XML， 取 决 于 返回 值 )， 添 加 一 组 请 求 参数 : 


$.get("test.cgi", { name: "John", time: "2pm" }, 
function(data)t{ 
alert("Data Loaded: " + data); 
}); 


jQuery ajax - getJSONI() 方法 


实例 
使 用 AJAX 请 求 来 获得 JSON 数据 ， 并 输出 结 


$("button").click(function(){ 
$.getJSON("demo_ajax_json.js",function(result){ 
$.each(result, function(i, field){ 
$("div").append(field + " "); 
}); 


i 、 S 
通过 HTTP GET 请 求 载 入 JSON 数据 。 
在 jQuery 1.2 中 ， 您 可 以 通过 使 用 JSONP 形式 的 回调 画 数 来 加 载 其 他 网 域 的 JSON 数据 ， 


如 "myurl?callback=?"。jQuery 将 自动 替换 ? 为 正确 的 函数 名 ， 以 执行 回调 画 数 。 注意 : 此 
行 以 后 的 代码 将 在 这 个 回调 画 数 执行 前 执行 。 


语法 





jQuery.getJSON(_url ,_data ,_success(data, status,xhr) ) 


参数 描述 
url 必需 。 规 定 将 请求 发 送 的 哪个 URL。 
data 可 选 。 规 定 连同 请 求 发 送 到 服务 器 的 数据 。 


可 选 。 规 定 当 请 求 成 功 时 运行 的 函数 。 额 外 的 参数 : 
success(data,status,xhr) ”response - 包含 来 自 请 求 的 结果 数据 status - 包含 请 求 的 状 
态 Xxhr - 包含 XMLHttpRequest 对 象 


详细 说 明 


该 贺 数 是 简写 的 Ajax 函数 ， 等 价 于 : 


$.ajax({ 
(Ue os Ue 
data: _data_， 
success: _callback ,， 
dataType: json 


}); 


发 送 到 服务 器 的 数据 可 作为 查询 字符 串 附加 到 URL 之 后 。 如 果 data 参数 的 值 是 对 象 ( 映 
射 ) ， 那 么 在 附加 到 URL 之 前 将 转换 为 字符 串 ， 并 进行 URL 编码 。 


传递 给 callback 的 返回 数据 ， 可 以 是 JavaScript 对 象 ， 或 以 JSON 结构 定义 的 数组 ， 并 使 用 
$.parseJSON() 方法 进行 解析 。 


示例 
从 test.js 载 入 JSON 数据 并 显示 JSON 数据 中 一 个 name 字段 数据 : 


$.getJSON("test.js", function(json)t{ 
alert("JSON Data: " + json.users[3].name); 


}); 


更 多 示例 


例子 1 


从 Flickr JSONP API 载 入 4 张 最 新 的 关于 猫 的 图 片 : 


HTML 代码 : 


<div id="images"></div> 


jQuery 代码 : 


$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne? 
tags=cat&tagmode=any&format=json&jsoncallback=?", function(data)t{ 
$.each(data.items, function(i,item){ 
$("<img/>").attr("src", item.media.m).appendTo("#images"); 
if ( i == 3 ) return false; 


用 


例子 2 


从 test.js 载 和 人 JSON 数据 ， 附 加 参数 ， 显 示 JSON 数据 中 一 个 name 字段 数据 : 


$.getJSON("test.js", { name: "John", time: "2pm" }, function(json)t{ 
alert("JSON Data: " + json.users[3].name); 


}); 


jQuery ajax - getScript() 方法 


A 
实例 
通过 AJAX 请 求 来 获得 并 运行 一 个 JavaScript 文件 : 


$("button").click(function(){ 
$.getscript("demo ajax_script.js"); 


}); 
hh 、 : 
定义 和 用 法 
getScript() 方法 通过 HTTP GET 请 求 载 入 并 执行 JavaScript 文件 。 
语法 


jQuery.getSscript(_url ,_success(response, status) ) 


url 将 要 请 求 的 URL 字符 串 。 


可 选 。 规 定 请 求 成 功 后 执行 的 回调 函数 。 额 外 的 参数 : 
response - 包含 来 自 请 求 的 结果 数据 status - 包含 请 求 的 状 
态 ("success", "notmodified", "error", "timeout" 或 


了 


"parsererror") 


success(response, status) 


详细 说 明 
该 加 数 是 简写 的 Ajax 玉 数 ， 等 价 于 : 


$.ajax({ 
wr 
dataType: "script", 
success: _success_ 


}); 
这 里 的 回调 函数 会 传人 返回 的 JavaScript 文件 。 这 通常 不 怎么 有 用 ， 因 为 那 时 脚本 已 经 运行 
Ff 
载 人 的 脚本 在 全 局 环境 中 执行 ， 因 此 能 够 引用 其 他 变量 ， 并 使 用 jQuery 画 数 。 
比如 加 载 一 个 test.js 文件 ， 里 边 包含 下 面 这 段 代码 : 


$(".result").html("<p>Lorem ipsum dolor Sit amet.</p>"); 


通过 引用 该 文件 名 ， 就 可 以 载 人 并 运行 这 段 脚本 : 


$.getscript("ajax/test.js", function() { 
alert("Load was performed."); 


}); 


注释 : jQuery 1.2 版 本 之 前 ，getScript 只 能 调用 同 域 JS 文件 。 1.2 中 ， 您 可 以 跨 域 调用 
JavaScript 文件 。 注 意 : Safari 2 或 更 早 的 版 本 不 能 在 全 局 作用 域 中 同步 执行 脚本 。 如 果 通 过 
getScript 加 入 脚本 ， 请 加 入 延 时 本 数 。 


更 多 实例 
例子 1 
加 载 并 执行 test.js : 


$.getscript("test.js"); 


例子 2 
加 载 并 执行 test.js ， 成 功 后 显示 信息 : 


$.getscript("test.js", function(){ 
alert("Script loaded and executed."); 


}); 


例子 3 
载 入 jQuery 官方 颜色 动画 插件 成 功 后 绑 定 颜色 变化 动画 : 


HTML 代码 : 


<button id="go">RuN</button> 
<div class="block"></div> 


jQuery 代码 : 


jQuery.getscript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", 
function(){ 
$("#g0").click(function(){ 
$(".block").animate( { backgroundCcolor: 'pink' }, 1000) 
.animate( { backgroundColor: 'blue' }, 1000); 
}); 
}); 


jQuery ajax - load() 方法 


实例 


使 用 AJAX 请 求 来 改变 div 元 素 的 文本 : 


$("button").click(function(){ 
$("div").load('demo ajax_load.txt'); 


您 可 以 在 页 面 底部 找到 更 多 TIY 实例 


定义 和 用 法 


load() 方法 通过 AJAX 请 求 从 服务 器 加 载 数据 ， 并 把 返回 的 数据 放置 到 指定 的 元 素 中 。 


注释 : 还 存在 一 个 名 为 load 的 jQuery 事件 方法 。 调 用 哪个 ， 取 决 于 参数 。 


语法 


load(_url , 


function(response, status, xhr) 


data_,_function(response, status, xhr)_ ) 





详细 说 明 


该 方法 


三 | 
全 


E33 


取 简 


参数 描述 

规定 要 将 请 求 发 送 到 哪个 URL。 

可 选 。 规 定 连同 请 求 发 送 到 服务 器 的 数据 。 

可 选 。 规 定 当 请 求 完 成 时 运行 的 函数 。 额 外 的 参数 : 
response - 包含 来 自 请 求 的 结果 数据 status - 包含 请 求 


的 状态 ("success", "notmodified", "error", "timeout" 或 
"parsererror") xhr- 包 合 XMLHttpRequest 对 象 


单 的 从 服务 器 获取 数据 的 方法 。 它 几乎 与 $.get(url, data, success) 等 价 ， 不 同 


的 是 它 不 是 全 局 梢 数 ， 并 且 它 拥有 隐 式 的 回调 函数 。 当 侦 测 到 成 功 的 响应 时 (上 比如 ， 当 
textStatus 为 "success" 或 "notmodified" 时 ) ，.load() 将 匹配 元 素 的 HTML 内 容 设置 为 返回 
的 数据 。 这 意味 着 该 方法 的 大 多 数 使 用 会 非常 简单 : 


$("#result").load("ajax/test.html"); 


如 果 提 供 回调 男 数 ， 则 会 在 执行 post-processing 之 后 执行 该 轿 数 : 


$("#result").load("ajax/test.html", function() { 
alert("Load was performed."); 


}); 


上 面 的 两 个 例子 中 ， 如 果 当 前 文档 不 包含 "result" ID， 则 不 会 执行 .load() 方法 。 
如 果 提 供 的 数据 是 对 象 ， 则 使 用 POST 方法 ; 否则 使 用 GET 方法 。 


加 载 页 面 片 段 


.load() 方法 ， 与 $.get() 不 同 ， 人 允许 我 们 规定 要 插入 的 远程 文档 的 某 个 部 分 。 这 一 点 是 通过 
url 参数 的 特殊 语法 实现 的 。 如 果 该 字符 串 中 包含 一 个 或 多 个 空格 ， 紧 接 第 一 个 空格 的 字符 串 
则 是 决定 所 加 载 内 容 的 jQuery 选择 器 。 


我 们 可 以 修改 上 面 的 例子 ， 这 样 就 可 以 使 用 所 获得 文档 的 某 部 分 : 


$("#result").load("ajax/test.html #container"); 


如 果 执 行 该 方法 ， 则 会 取 回 ajax/test.html 的 内 容 ， 不 过 然后 ，jQuery 会 解析 被 返回 的 文档 ， 
来 查找 带 有 容器 ID 的 元 素 。 该 元 素 ， 连 同 其 内 容 ， 会 被 插入 带 有 结果 ID 的 元 素 中 ， 所 取 回 
文档 的 其 余部 分 会 被 丢弃 。 


jQuery 使 用 浏览 器 的 .innerHTML 属性 来 解析 被 取 回 的 文档 ， 并 把 它 插入 当前 文档 。 在 此 过 
程 中 ， 浏 览 器 常会 从 文档 中 过 滤 掉 元 素 ， 上 比如 <html>, <title> 或 <head> 元 素 。 结 果 是 ， 由 
.load() 取 回 的 元 素 可 能 与 由 浏览 器 直接 取 回 的 文档 不 完全 相同 。 


注释 : 由 于 浏览 器 安全 方面 的 限制 ， 大 多 数 "Ajax" 请 求 遵守 同 源 策略 ; 请 求 无 法 从 不 同 的 
域 、 子 域 或 协议 成 功 地 取 回 数据 。 


更 多 实例 


例子 1 
加 载 feeds.html 文件 内 容 : 


$("#feeds").1load("feeds.html"); 


例子 2 


与 上 面 的 实例 类 似 ， 但 是 以 POST 形式 发 送 附加 参数 并 在 成 功 时 显示 信息 : 


$("#feeds").load("feeds.php", {iliimit: 25}, function(){ 
alert("The last 25 entries in the feed have been loaded"); 


}); 


例子 3 
加 载 文章 侧 边 栏 导航 部 分 至 一 个 无 序列 表 : 


HTML 代码 : 


<b>jQuery Links:</b> 
<ul id="]inks"></ul> 


jQuery 代码 : 


$("#links").load("/Main Page #p-Getting-Started 1i"); 


更 多 TIY 实例 

生成 AJAX 请 求 ， 并 通过 该 请 求 发 送 数 据 

如 何 使 用 data 参数 通过 AJAX 请 求 来 发 送 数据 。 (本 例 在 AJAX 教程 中 解释 过 。) 
生成 AJAX 请 求 ， 并 使 用 回调 函数 

如 何 使 用 function 参数 处 理 来 自 AJAX 请 求 的 数据 结果 。 

生成 带 有 错误 的 AJAX 请 求 


如 何 使 用 function 参数 来 处 理 AJAX 请 求 中 的 错误 (使 用 XMLHttpRequest 参数 ) 。 


jQuery ajax - param() 方法 
例 


序列 化 一 个 key/Value 对 象 : 


将 


var params = { width:1900, height:1200 }; 
var str = jQuery.param(params); 
$("#results").text(str); 


结果 : 


width=1680&height=1050 


TIY 实例 
输出 序列 化 对 象 的 结果 : 


$("button").click(function(){ 
$("div").text($.param(person0bj)); 
); 


定义 和 用 法 
param() 方法 创建 数组 或 对 象 的 序列 化 表示 。 
该 序列 化 值 可 在 进行 AJAX 请 求 时 在 URL 查询 字符 串 中 使 用 。 


语法 


jQuery.param(_object_,_traditional_ ) 


参数 描述 
object 要 进行 序列 化 的 数组 或 对 象 。 
traditional 规定 是 否 使 用 传统 的 方式 浅 层 进行 序列 化 (参数 序列 化 ) 。 


详细 说 明 


param() 方法 用 于 在 内 部 将 元 素 值 转换 为 序列 化 的 字符 串 表 示 。 请 参阅 .serialize() 了 解 更 多 


信息 
记 /No 


对 于 jQuery 1.3， 如 果 传 递 的 参数 是 一 个 函数 ， 那 么 用 .param() 会 得 到 这 个 函 数 的 返回 值 ， 
而 不 是 把 这 个 函数 作为 一 个 字符 串 来 返回 。 


对 于 jQuery 1.4，.param() 方法 将 会 通过 深度 递 为 的 方式 序列 化 对 象 ， 以 便 符合 现代 化 脚本 
语言 的 需求 ， 比 如 PHP、Ruby on Rails 等 。 你 可 以 通过 设置 jQuery.ajaxSettings.traditional 
= true; 来 全 局 地 禁用 这 个 功能 。 


如 果 被 传递 的 对 象 在 数组 中 ， 则 必须 是 以 .serializeArray() 的 返回 值 为 格式 的 对 象 数组 : 


[{name: "first",value:"Rick"}, 
{name:"last",value:"Astley"}, 
{name:"job",value:"Rock Star"}] 


注意 : 因为 有 些 框架 在 解析 序列 化 数字 的 时 候 能 力 有 限 ， 所 以 当 传 递 一 些 含有 对 象 或 嵌 套 数 
组 的 数组 作为 参数 时 ， 请 务必 小 心 ! 


在 jQuery 1.4 中 ，HTML5 的 input 元素 也 会 被 序列 化 。 


更 多 实例 
我 们 可 以 如 下 显示 对 象 的 查询 字符 串 表 示 以 及 URI 编码 版 本 : 


Var myobject = { 
a: { 
One ls 
two: 2, 
three: 3 


}, 

lo [sl] 
var recursiveEncoded 
var recursiveDecoded 


$.param(myObject); 
decodeURIComponent($.param(myObject ) ) ; 


alert(recursiveEncoded ) ; 
alert(recursiveDecoded ) ; 


recursiveEncoded 和 recursiveDecoded 的 值 输出 如 下 : 


a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3 
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3 


可 以 将 traditional 参数 设置 为 true， 来 模拟 jQuery 1.4 之 前 版 本 中 $.param() 的 行为 : 


var myobject = { 
a: { 
one: 1, 
two: 2, 
three: 3 


了 


b: [1,2,3] 


var shallowEncoded 
var shallowDecoded 


$.param(myObject, true); 
decodeURIComponent(shallowEncoded); 


alert(shallowEncoded); 
alert(shallowDecoded); 


recursiveEncoded 和 recursiveDecoded 的 值 输出 如 下 : 


a=%5Bobject+0bject%5D&b=1&b=28&b=3 
a=[object+0bject |]&b=1&b=2&b=3 


jQuery ajax - post() 方法 
实例 


请 求 test.php 网 页 ， 忽 略 返回 值 : 


$.post("test.php"); 


TIY 实例 
通过 AJAX POST 请 求 改 变 div 元 素 的 文本 : 


$("input").keyup(function( ){ 
txt=$("input").val(); 
$.post("demo_ajax_gethint.asp", {suggest:txt},function(result){ 
$("span").html(result); 
}); 
}); 


定义 和 用 法 
post() 方法 通过 HTTP POST 请 求 从 服务 器 载 入 数据 。 


语法 


jQuery.post(_url ,_data ,_success(data, textStatus, jqXHR)_,_dataType_) 





参数 描述 
url 必需 。 规 定 把 请 求 发 送 到 哪个 URL。 
data 可 选 。 映 射 或 字符 串 值 。 规 定 连 同 请 求 发 送 到 服务 器 的 数据 。 
success(data, 
textStatus, jgXHR,) 可 选 。 请 求 成 功 时 执行 的 回调 函数 。 


可 选 。 规 定 预 期 的 服务 器 响应 的 数据 类 型 。 黑 认 执 行 智能 判断 


dataType (xml、json、script 或 html) 。 


详细 说 明 


该 男 数 是 简写 的 Ajax 画 数 ， 等 价 于 : 


$.ajax({ 
type: 'POST', 
wr 
data: _data_， 
success: _success , 
dataType: _dataType_ 
}); 


根据 响应 的 不 同 的 MIME 类 型 ， 传 递 给 success 回调 函数 的 返回 数据 也 有 所 不 同 ， 这 些 数据 
可 以 是 XML 根 元 素 、 文 本 字符 串 、JavaScript 文件 或 者 JSON 对 象 。 也 可 向 success 回调 函 
数 传递 响应 的 文本 状态 。 


对 于 jQuery 1.5， 也 可 以 向 success 回调 函数 传递 jqXHR 对 象 (jQuery 1.4 中 传递 的 是 
XMLHttpRequest 对 象 ) 。 


大 部 分 实现 会 规定 一 个 success 回 数 : 


$.post("ajax/test.html", function(data) { 
$(".result").html(data); 
}); 


本 例 读 取 被 请 求 的 HTML 片段 ， 并 插入 页 面 中 。 


通过 POST 读 取 的 页 面 不 被 缓存 ， 因 此 jQuery.ajaxSetup() 中 的 cache 和 ifModified 选项 不 


会 影响 这 些 请 求 。 


注释 : 由 于 浏览 器 安全 方面 的 限制 ， 大 多 数 "Ajax" 请 求 遵守 同 源 策略 ; 请 求 无 法 从 不 同 的 
域 、 子 域 或 协议 成 功 地 取 回 数据 。 


注释 : 如 果 由 jQuery.post() 发 起 的 请 求 返 回 错误 代码 ， 那 么 不 会 有 任何 提示 ， 除 非 脚本 已 调 
用 了 全 局 的 .ajaxError() 方法 。 或 者 对 于 jQuery 1.5，jQuery.post() 返回 的 jqXHR 对 象 的 
.error() 方法 也 可 以 用 于 错误 处 理 。 


jqXHR 对 象 


对 于 jQuery 1.5， 所 有 jQuery 的 AJAX 方法 返回 的 是 XMLHTTPRequest 对 象 的 超 集 。 由 
$.post() 返回 的 jQuery XHR 对 象 或 "jqXHR," 实 现 了 约定 的 接口 ， 赋 予 其 所 有 的 属性 、 方 法 ， 
以 及 约定 的 行为 。 出 于 对 由 $.ajax() 使 用 的 回调 函数 名 称 便利 性 和 一 致 性 的 考虑 ， 它 提供 了 
.error(), .success() 以 及 .complete() 方法 。 这 些 方法 使 用 请 求 终止 时 调用 的 函数 人 参数， 该 画 
数 接受 与 对 应 命名 的 $.ajax() 回调 函数 相同 的 参数 。 


jQuery 1.5 中 的 约定 接口 同样 允许 jQuery 的 Ajax 方法 ， 包 括 $.post()， 来 链接 同一 请 求 的 多 
个 .success()、.complete() 以 及 .error() 回调 函数 ， 甚 至 会 在 请 求 也 许 已 经 完成 后 分 配 这 些 回 
调 辑 数 。 


/ 请 求生 成 后 立即 分 配 处 理 程序 ， 请 记 住 该 请 求 针 对 jqxhr 对 象 
var jqxhr = $.post("example.php", function() { 
alert("success"); 


}) 


Success(function() { alert("second success"); }) 
.error(function() { alert("error"); }) 
.complete(function() { alert("complete"),; }); 

// 在 这 里 执行 其 他 任务 


// 为 上 面 的 请 求 设置 另 一 个 完成 辑 数 
jqxhr. ee alert("second complete"); }); 


更 多 实例 
例子 1 


请 求 test.php 页 面 ， 并 一 起 发 送 一 些 额外 的 数据 (同时 仍然 忽略 返回 值 ) 


$.post("test.php", { name: "John", time: "2pm" } ); 


例子 2 
向 服务 器 传递 数据 数组 〈 同 时 仍然 忽略 返回 值 


$.post("test.php", { 'choices[]': ["Jon", "Susan"] }); 


例子 3 
使 用 ajax 请 求 发 送 表单 数据 : 


$.post("test.php", $("#testform").serialize()); 


例子 4 


输出 来 自 请 求 页 面 test.php 的 结果 (HTML 或 XML， 取 决 于 所 返 


$.post("test.php", function(data)t{ 
alert("Data Loaded: " + data); 
}); 


例子 5 


向 页 面 test.php 发 送 数 据 ， 并 输出 结果 (HTML 或 XML， 取 决 于 所 返 


回 的 内 容 ) 


回 的 内 容 ) 


$.post("test.php", { name: "John", time: "2pm" }, 
function(data)t{ 
alert("Data Loaded: " + data); 
}); 


例子 6 


获得 test.php 页 面 的 内 容 ， 并 存储 为 XMLHttpResponse 对 象 ， 并 通过 process() 这 个 
JavaScript 加 数 进行 处 理 : 


$.post("test.php", { name: "John", time: "2pm" }, 
function(data)t{ 
process(data); 
}, "xml"); 


例子 7 
获得 test.php 页 面 返回 的 json 格式 的 内 容 : 


$.post("test.php", { "func": "getNameAndTime" }, 
function(data)t{ 
alert(data.name); // John 
console.log(data.time); // 2pm 
}, "json"); 


jQuery ajax - serialize() 方法 


实例 
输出 序列 化 表单 值 的 结果 : 


$("button").click(function(){ 
$("div").text($("form").serialize( )); 
); 


Et ~ Ny 

serialize() 方法 通过 序列 化 表单 值 ， 创 建 URL 编码 文本 字符 串 。 

您 可 以 选择 一 个 或 多 个 表单 元 素 (比如 input 及 /或 文本 框 ) ， 或 者 form 元 素 本 身 。 
序列 化 的 值 可 在 生成 AJAX 请 求 时 用 于 URL 查询 字符 串 中 。 

语法 


$(_Sselector_) .serialize() 


详细 说 明 

.Serialize() 方法 创建 以 标准 URL 编码 表示 的 文本 字符 串 。 它 的 操作 对 象 是 代表 表单 元 素 集合 
的 jQuery 对 象 。 

表单 元 素 有 几 种 类 型 : 


<form> 
<div><input type="text" name="a" value="1" id="a" /></div> 
<div><input type="text" name="b" value="2" id="b" /></div> 
<div><input type="hidden" name="c" value="3" id="c" /></div> 
<div> 
<textarea name="d" rows="8" cols="40">4</textarea> 
</div> 
<div><select name="e"> 
<option value="5" selected="selected">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
</select></div> 
<div> 
<input type="checkbox" name="f" value="8" id="f" /> 
</div> 
<div> 
<input type="submit" name="g" value="Submit" id="g" /> 
</div> 
</form> 


.Serialize() 方法 可 以 操作 已 选取 个 别 表单 元 素 的 jQuery 对 象 ， 比 如 <input>, <textarea> 以 及 
<select>。 不 过 ， 选 择 <form> 标签 本 身 进行 序列 化 一 般 更 容易 些 : 


$('form').submit(function() { 
alert($(this).serialize()); 
return false; 


}); 


输出 标准 的 查询 字符 串 : 


a=1&b=2&c=3&d=4&e=5 


注释 : 只 会 将 "成 功 的 控件 “序列 化 为 字符 串 。 如 果 不 使 用 按钮 来 提交 表单 ， 则 不 对 提交 按钮 的 
值 序列 化 。 如 果 要 表单 元 素 的 值 包含 到 序列 字符 串 中 ， 元 素 必须 使 用 name 属性 。 


jQuery ajax - serializeArray() 方法 


实例 
输出 以 数组 形式 序列 化 表单 值 的 结果 : 


$("button").click(function(){ 

x=$("form").serializeArray(); 

$.each(x, function(i, field){ 
$("#results").append(field.name + ":" + field.value + " "); 
}); 
}); 


ce 、 : 
serializeArray() 方法 通过 序列 化 表单 值 来 创建 对 象 数组 (名 称 和 值 ) 。 
您 可 以 选择 一 个 或 多 个 表单 元 素 (比如 input 及 /或 textarea) ， 或 者 form 元 素 本 身 。 


语法 


$(_selector_).serializeArray() 


详细 说 明 
serializeArray() 方法 序列 化 表单 元 素 (类 似 .serialize() 方法 ) ， 返 回 JSON 数据 结构 数据 。 


注意 : 此 方法 返回 的 是 JSON 对 象 而 非 JSON 字符 串 。 需 要 使 用 插件 或 者 第 三 方 库 进 行 字符 
串 化 操作 。 


返回 的 JSON 对 象 是 由 一 个 对 象 数组 组 成 的 ， 其 中 每 个 对 象 包含 一 个 或 两 个 名 值 对 
name 参数 和 value 参数 (如 果 value 不 为 空 的 话 ) 。 举 例 来 说 : 





{name: 'firstname', value: 'Hello'}, 
{name: 'Jlastname', value: 'World'}, 
{name: 'alias'}，// 值 为 空 

] 


.SerializeArray() 方法 使 用 了 W3C 关于 successful controls (有 效 控 件 ) 的 标准 来 检测 哪些 
元 素 应 当 包 括 在 内 。 特 别 说 明 ， 元 素 不 能 被 禁用 (禁用 的 元 素 不 会 被 包括 在 内 ) ， 并 且 元 素 
应 当 有 含有 name 属性 。 提 交 按 钮 的 值 也 不 会 被 序列 化 。 文 件 选择 元 素 的 数据 也 不 会 被 序列 


化 。 


该 方法 可 以 对 已 选择 单独 表单 元 素 的 对 象 进 行 操 作 ， 比 如 <input>, <textarea>, 和 <select>。 
不 过 ， 更 方便 的 方法 是 ， 直 接 选 择 <form> 标签 自身 来 进行 序列 化 操作 。 


$("form").submit(function() { 
console.log($(this).serializeArray()); 
return false; 


}); 


上 面 的 代码 产生 下 面 的 数据 结构 (假设 浏览 器 支持 console.log) 


示例 
取得 表单 内 容 并 插入 到 网 页 中 : 


HTML 代码 : 


<p id="results"><b>Results:</b> </p> 
<form> 
<select name="single"> 
<option>Single</option> 
<option>Single2</option> 
</select> 
<select name="multiple" multiple="multiple"> 
<option selected="selected">Multiple</option> 
<option>Multiple2</option> 
<option selected="selected">Multiple3</option> 
</select><br/> 
<input type="checkbox" name="check" value="check1"/> check1 
<input type="checkbox" name="check" value="check2" checked="checked"/> check2 
<input type="radio" name="radio" value="radioi" checked="checked"/> radiol1 
<input type="radio" name="radio" value="radio2"/> radio2 
</form> 


jQuery 代码 : 


var fields = $("select, :radio").serializeArray(); 

jQuery.each( fields, function(i, field){ 
$("#results").append(field.value + " "); 

}); 


jQuery 通 历 


jQuery 参考 手册 - 通 历 


jQuery 欢 


函数 
.add() 
.andSelf() 
.children() 
.Closest() 
.contents() 


.each() 


.end() 


Jast() 
.map() 
.next() 
.nextAIl() 


.nextUntil() 
.not() 
.offsetParent() 


.parent() 


局 历 图 数 


沙 数 包括 了 用 于 得 选 、 查 找 和 串联 元 素 的 方法 。 


描述 
将 元 素 添加 到 匹配 元 素 的 集合 中 。 
把 堆栈 中 之 前 的 元 素 集 添加 到 当前 集合 中 。 
获得 匹配 元 素 集合 中 每 个 元 素 的 所 有 子 元 素 。 
从 元 素 本 身 开 始 ， 逐 级 向 上 级 元 素 匹 配 ， 并 返回 最 先 匹 配 的 祖先 元 素 。 
获得 匹配 元 素 集合 中 每 个 元 素 的 子 元 素 ， 包 括 文本 和 注释 节点 。 
对 jQuery 对 象 进行 迭代 ， 为 每 个 匹配 元 素 执 行 玉 数 。 


结束 当前 链 中 最 近 的 一 次 筛选 操作 ， 并 将 匹配 元 素 集合 
状态 。 


将 匹配 元 素 集合 缩减 为 位 于 指定 索引 的 新 元 素 。 

将 匹配 元 素 集合 缩减 为 匹配 选择 器 或 匹配 本 数 返回 值 的 新 元 素 。 
获得 当前 匹配 元 素 集 合 中 每 个 元 素 的 后 代 ， 由 选择 器 进行 筛选。 
将 匹配 元 素 集合 缩减 为 集合 中 的 第 一 个 元 素 。 

将 匹配 元 素 集合 缩减 为 包含 特定 元 素 的 后 代 的 集合 。 


根据 选择 器 检查 当前 匹配 元 素 集合 ， 如 果 存 在 至 少 一 个 匹配 元 素 ， 则 返 
回 true。 


将 匹配 元 素 集合 缩减 为 集合 中 的 最 后 一 个 元 素 。 


把 当前 匹配 集合 中 的 每 个 元 素 传 递 给 函数 ， 产 生 包含 返回 值 的 新 
jQuery 对 象 。 


获得 匹配 元 素 集 合 中 每 个 元 素 紧 邻 的 同辈 元 素 。 


获得 匹配 元 素 集合 中 每 个 元 素 之 后 的 所 有 同音 元 素 ， 由 选择 器 进行 筛选 
(可 选 ) 。 


获得 每 个 元 素 之 后 所 有 的 同辈 元 素 ， 直 到 遇 
从 匹配 元 素 集 合 中 删除 元 素 。 

用 于 定位 的 第 一 个 父 元 素 。 
得 当前 匹配 元 素 集合 中 每 个 元 素 的 父 元 素 ， 由 选择 器 筛选 〈 可 选 ) 。 


得 当前 匹配 元 素 集合 中 每 个 元 素 的 祖先 元 素 ， 由 选择 器 簿 


到 前 一 次 的 


到 匹配 选择 器 的 元 素 为 止 。 


+、 上 4 晶 


获得 用 


.parentsUntil() 


.prev() 


.brevAll() 
.brevUntil() 
.Siblings() 


.Slice() 


选 ) 。 


获得 当前 匹配 元 素 集 合 中 每 个 元 素 的 祖先 元 素 ， 直 到 遇 到 匹配 选择 器 的 
元 素 为 止 。 


获得 匹配 元 素 集合 中 每 个 元 素 紧 邻 的 前 一 个 同辈 元 素 ， 由 选择 器 筛选 
(可 选 ) 。 


获得 匹配 元 素 集 合 中 每 个 元 素 之 前 的 所 有 同辈 元 素 ， 由 选择 器 进行 筛选 
(可 选 ) 。 


获得 每 个 元 素 之 前 所 有 的 同辈 元 素 ， 直 到 遇 到 匹配 选择 器 的 元 素 为 止 。 
获得 匹配 元 素 集合 中 所 有 元 素 的 同 非 元 素 ， 由 选择 器 筛选 (可 选 ) 。 
将 匹配 元 素 集合 缩减 为 指定 范围 的 子 集 。 


jQuery 通 万 - add() 方法 


实例 


找到 所 有 div 并 添加 边框 。 然 后 将 所 有 有 段落 添加 到 该 jQuery 对 象 ， 并 把 它们 的 背景 设置 为 黄 
色 : 


$("div").css("border", "2px Solid red") 
.add("p") 
.Css("background", "yellow"); 


ch 、 : 
定义 和 用 法 
add() 方法 将 元 素 添加 到 匹配 元 素 的 集合 中 。 
语法 1 
.add(_selector_) 


参数 描述 
selector ”字符 串 值 ， 表 示 查 找 供 添 加 到 匹配 元 素 集 合 的 元 素 的 选择 器 表达 式 。 


语法 2 


.add(_elements_ ) 


参数 描述 
elements 添加 到 匹配 元 素 集合 的 一 个 或 多 个 元 素 。 
语法 3 
.add(_html_ ) 
参数 描述 


html 添加 到 匹配 元 素 集合 的 HTML 片段 。 


语法 4 


.add(_jQueryObject_ ) 


参数 描述 
jQueryObject 添加 到 匹配 元 素 集合 的 已 有 jQuery 对 象 。 
语法 5 
,add(_selector ，_context_) 
参数 描述 


selector 字符 串 值 ， 表 示 查 找 供 添 加 到 匹配 元 素 集 合 的 元 素 的 选择 器 表达 式 。 
context 选择 器 开始 进行 匹配 的 位 置 。 


详细 说 明 


暂 无 。 


jQuery 通 万 -andSelf() 方法 


实例 


找到 所 有 div， 以 及 其 中 的 所 有 段落 ， 并 为 它们 添加 两 个 类 名 。 请 注意 ， 由 于 未 使 用 
.andSelf()，div 没有 黄色 背景 色 。 


$("div").find("p").andSelf().addclass("border"); 
$("div").find("p").addclass("background"); 


定义 和 用 法 
add() 方法 把 堆栈 中 之 前 的 元 素 集 添 加 到 当前 集合 。 
语法 


.andSelf() 


详细 说 明 
请 思考 这 个 拥有 简单 列表 的 页 面 : 


<ul> 
<1i>list item 1</1i> 
<1i>list item 2</1i> 
<1li class="third-item">list item 3</1i> 
<1i>list item 4</1i> 
<1i>list item 5</1i> 
</ul> 


以 下 代码 的 结果 是 项 目 3,4,5 拥有 红色 背景 : 


$("1i,.third-item").nextAll().andSself() 
.Css("background-color", "red"); 


首先 ， 初 始 的 选择 器 会 定位 项 目 3， 初 始 化 的 堆栈 存 有 仅 包 含 该 项 目的 集合 。 调 用 .nextAII() 
会 闻 项 目 4, 5 的 集合 推 入 堆栈 。 最 后 ， 调 用 .andSelf() 会 合并 这 两 个 集合 ， 所 创建 的 jQuery 
对 象 指向 按照 文档 顺序 的 所 有 三 个 项 目 : {[<li.third-item>,<li>,<li> 】}。 


jQuery 通 万 - children() 方法 


实例 
找到 类 名 为 "selected" 的 所 有 div 的 子 元 素 ， 并 将 其 设置 为 蓝 色 : 


$("div").children(".selected").css("color", "blue"); 
hh 、 * 
add() 方法 返回 匹配 元 素 集 合 中 每 个 | 元 素 的 子 元 素 ， 添加 可 选 参数 可 通过 选择 器 进行 过 滤 。 


语法 


.children(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 匹配 元 素 的 选择 器 表达 式 。 
详细 说 明 


如 果 给 定 表示 DOM 元 素 集合 的 jQuery 对 象 ，.children() 方法 允许 我 们 检索 DOM ee 
些 元 素 ， 并 用 匹配 元 素 构造 新 的 jQuery 对 象 。.find() 和 .children() 方法 类 似 ， 不 过 后 者 只 治 
着 DOM 树 向 下 通 历 单一 层级 。 


请 注意 ， 与 大 多 数 jQuery 方法 一 样 ，.children() 不 返回 文本 节点 ; 如 果 需 要 获得 包含 文本 和 
注释 节点 在 内 的 所 有 子 节点 ， 请 使 用 .contents()。 


该 方法 接受 一 个 选择 器 表达 式 作为 可 选 参数 ， 与 我 们 传递 到 $() 的 参数 的 类 型 是 相同 的 。 如 果 
应 用 该 选择 器 ， 将 测试 元 素 是 否 匹 配 该 表达 式 ， 以 此 算 选 这 些 元 素 。 


请 思考 这 个 带 有 基础 的 馈 套 列表 的 页 面 : 


<ul class="]evel-1"> 
<li class="item-i">I</1i> 
<1li class="item-ii">II 
<ul class="]Jevel-2"> 
<li class="item-a">A</1i> 
<li class="item-b">B 
<ul class="]Jevel-3"> 
<11 class="item-1">1</1i> 
<1i class="item-2">2</1i> 
<11 class="item-3">3</1i> 


</ul> 
</1i> 
<li class="item-c">C</1i> 
</ul> 
</1i> 
<li class="item-iii">III</1i> 
</ul> 


如 果 我 们 从 level-2 列表 开始 ， 我 们 可 以 找到 它 的 子 元 素 : 


$('ul.level-2').children().css('background-color', 'red'); 


这 行 代码 的 结果 是 ， 项 目 A, B, C 得 到 红色 背景 。 由 于 我 们 没有 应 用 选择 器 表达 式 ， 返 回 的 
jQuery 对 象 包含 了 所 有 子 元 素 。 如 果 应 用 一 个 选择 器 的 话 ， 那 么 只 会 包括 匹配 的 项 目 。 


jQuery 通 万 - closest() 方法 


实例 


本 例 演示 如 何 通过 closest() 完成 事件 委托 。 当 被 最 接近 的 列表 元 素 或 其 子 后 代 元 素 被 点 击 
时 ， 会 切换 黄色 背景 : 


$( document ).bind("click", function( e ) { 
$( e.target ).closest("1i").toggleClass("hilight"); 
}); 


定义 和 用 法 


closest() 方法 获得 匹配 选择 器 的 第 一 个 祖先 元 素 ， 从 当前 元 素 开 始 治 DOM 树 向 上 。 


.Closest(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 匹 配 元 素 的 选择 器 表达 式 。 
详细 说 明 


如 果 给 定 表示 DOM 元 素 集合 的 jQuery 对 象 ，.closest() 方法 允许 我 们 检索 DOM 树 中 的 这 些 
元 素 以 及 它们 的 祖先 元 素 ， 并 用 匹配 元 素 构 造 新 的 jQuery 对 象 。.parents() 和 .closest() 方法 
类 似 ， 它 们 都 治 DOM 树 向 上 通 历 。 两 者 之 间 的 差异 尽管 微妙 ， 却 很 重要 : 


.Closest() .parents() 
从 当前 元 素 开 始 从 父 元 素 开 始 
治 DOM 树 向 上 通 历 ， 治 DOM 树 向 上 通 历 ， 直 到 文档 的 根 元 素 为 止 ， 将 每 个 祖先 
直到 找到 已 应 用 选择 器 元 素 添加 到 一 个 临时 的 集合 ; 如 果 应 用 了 选择 器 ， 则 会 基于 
的 一 个 匹配 为 止 。 该 选择 器 对 这 个 集合 进行 筛选 。 


、 今天 个 不 一 个 示 
天 的 \CUo 和 ”返回 包含 替 个 、 一 个 或 多 个 元 素 的 jQuery 对 象 


请 看 下 面 的 HTML 片段 : 


<ul id="one" class="level-1"> 
<li class="item-i">I</1i> 
<11 id="ii" class="item-ii">II 
<ul class="]evel-2"> 
<li class="item-a">A</1i> 
<li class="item-b">B 
<ul class="]Jevel-3"> 
<li class="item-1">1</1i> 
<1li class="item-2">2</1i> 
<li class="item-3">3</1i> 
</ul> 
</1i> 
<li class="item-c">C</1i> 
</U]> 
</1i> 
<li class="item-iii">III</1i> 
</ul> 


例子 1 
假设 我 们 执行 一 个 从 项 目 A 开始 的 对 <ul> 元 素 的 搜索 : 


$('1i,.item-a').closest('ul').css('background-color', 'red'); 
这 会 改变 level-2 <ul> 的 颜色 ， 这 是 因为 当 向 上 马 历 DOM 树 时 会 第 一 个 遇 到 该 元 素 。 
例子 2 


假设 我 们 搜索 的 是 <li> 元 素 : 


$('1i,.item-a').closest('1i').css('background-color', 'red'); 


这 会 改变 列表 项 目 A 的 颜色 。 在 向 上 通 历 DOM 树 之 前 ，.closest() 方法 会 从 i 元 素 本 身 开始 
搜索 ， 直 到 选择 器 匹配 项 目 A 为 止 。 


例子 3 
我 们 可 以 传递 DOM 元 素 作为 context， 在 其 中 搜索 最 接近 的 元 素 。 


var listItemIIl = document.getElementById('ii'); 
$('1i.item-a').closest('ul', listItemII).css('background-color', ‘'red'); 
$('1i.item-a').closest('#one', listItemII).css('background-color', 'green'); 


以 上 代码 会 改变 level-2 <ul> 的 颜色 ， 因 为 它 既是 列表 项 A 的 第 一 个 <ul> 和 祖先， 同时 也 是 列 
表 项 上 的 后 代 。 它 不 会 改变 level-1 <ul> 的 颜色 ， 因 为 它 不 是 list item 1| 的 后 代 。 


jQuery 通 万 - contents() 方法 


实例 
找到 段落 中 的 所 有 文本 节点 ， 并 用 粗 体 标签 包 装 它们 。 


$("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>"); 


定义 和 用 法 
contents() 方法 获得 匹配 元 素 集合 中 每 个 元 素 的 子 节点 ， 包 括 文 本 和 注释 节点 。 
语法 


.Ccontents() 


详细 说 明 


如 果 给 定 表示 DOM 元 素 集 合 的 jQuery 对 象 ，.contents() 方法 允许 我 们 检索 DOM 树 中 的 这 
些 元 素 的 直接 子 节点 ， 并 用 匹配 元 素 构 造 新 的 jQuery 对 象 。.contents() 和 .children() 方法 类 
似 ， 不 同 的 是 前 者 在 结果 jQuery 对 象 中 包含 了 文本 节点 以 及 HTML 元 素 。 


.Contents() 方法 也 可 以 用 于 获得 iframe 的 内 容 文 档 ， 前 提 是 该 frame 与 主页 面 在 同一 个 域 。 
请 思考 下 面 这 个 带 有 一 些 文本 节点 的 <div>， 每 个 节点 被 两 个 折 行 元 素 (<br />) 分 隔 : 


<div class="container"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<br /><br /> 
Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. 
<br /> <br /> 
Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. 

</div> 


我 们 可 以 使 用 .contents() 方法 来 把 文本 块 转换 为 形式 良好 的 段落 : 


$('.container').contents().filter(function() { 
return this,nodeType == 3; 


}) 
:wrap('<p></p>') 

.end() 

.filter('br') 
.remove( ); 


St <div class="container"> 的 内 容 ， 然 后 滤 过 其 文本 节点 ， 将 文本 节点 封 

装 入 段落 标签 中 。 这 是 通过 测试 元 素 的 .nodeType 属性 实现 的 。 人 类 型 的 
数字 代码 ; 文本 节点 使 用 代码 3。 内 容 会 被 再 次 过 滤 ， 这 次 针对 <br /> 元 素 ， 这 些 元 素 会 被 
移 除 。 


jQuery 通 万 - each() 方法 


实例 
偷 出 每 个 上 元 素 的 文本 : 


$("button").click(function(){ 
$("1i").each(function(){ 
alert($(this).text()) 
}); 
}); 


em 、 N 

each() 方法 规定 为 每 个 匹配 元 素 规 定 运行 的 本 数 。 

提示 : 返回 false 可 用 于 及 早 停止 循环 。 

语法 
$(_selector_).each(_function(index,element)_) 


参数 描述 


必需 。 为 每 个 匹配 元 素 规定 运行 的 函数 。 jnaex - 选择 器 的 


function(indexelemeny， | gex 位 恒 element= 当前 的 元 来 (也 可 使 用 "this" 选择 器 ) 


jQuery 通 万 -end() 方法 


例 


选择 所 有 段落 ， 找 到 这 些 段落 中 的 span 元 素 ， 然 后 将 它们 恢复 为 段落 ， 并 把 段落 设置 为 两 像 
素 的 红色 边框 : 


将 


$("p").find("span").end().css("border", "2px red solid"); 


定义 和 用 法 


end() 方法 结束 当前 链条 中 的 最 近 的 筛选 操 作 ， 并 将 匹配 元 素 集 还 原 为 之 前 的 状态 。 


详细 说 明 


大 多 数 jQuery 的 通 历 方法 会 操作 一 个 jQuery 对 象 实例 ， 并 生成 一 个 匹配 不 同 DOM 元 素 集 的 
新 对 象 。 当 发 生 这 种 情况 时 ， 应 该 会 把 新 的 元 素 集 推 人 维持 在 对 象 中 的 堆栈 内 。 每 次 成 功 的 
筛选 方法 调用 都 会 把 新 元 素 推 入 堆栈 中 。 如 果 我 们 需要 老 的 元 素 集 ， 可 以 使 用 end() 从 堆栈 中 
弹出 新 集合 。 


假设 页 面 中 有 一 对 很 短 的 列表 : 


<ul class="first"> 
<11 class="foo">list item 1</1i> 
<]li>list item 2</1i> 
<1li class="bar">list item 3</1i> 
</ul> 
<ul class="second"> 
<1i class="foo">list item 1</1i> 
<]li>list item 2</1i> 
<1li class="bar">list item 3</1i> 
</ul> 


例子 1 


主要 是 在 利用 jQuery 的 链条 属性 〈 命 令 链 ) 时 ，jQuery 会 比较 有 用 。 如 果 不 使 用 命令 链 ， 
们 一 般 是 通过 变量 名 来 调用 之 前 的 对 象 ， 这 样 我 们 就 不 需要 操作 堆栈 了 。 不 过 通过 end()， 
们 可 以 把 所 有 方法 调用 串联 在 一 起 : 


我 
我 


$('ul.first').find('.foo').css('background-color', 'red') 
.end().find('.bar').css('background-color', 'green'); 


这 条 命令 链 检索 第 一 个 列表 中 类 名 为 foo 的 项 目 ， 并 把 它们 的 背景 设置 为 红色 。end() 会 将 对 
象 还 原 为 调用 find() 之 前 的 状态 ， 所 以 第 二 个 find() 查找 的 是 <ul class="first"> 内 的 '.bar ， 
而 不 是 在 列表 的 <li class="foo"> 中 查找 ， 并 将 匹配 元 素 的 背景 设置 为 绿色 。 最 后 的 结果 是 第 
一 个 列表 中 的 项 目 1 和 项 目 3 被 设置 了 带 颜 色 的 背景 ， 而 第 二 个 列表 中 的 项 目 没 有 任何 变 
化 。 


例子 2 


这 条 长 长 的 jQuery 链 可 以 可 视 化 为 结构 化 的 代码 块 ， 筛 选 方 法 打开 谋 套 代码 块 ， 而 end() 方 
法 用 来 关闭 代码 块 : 


$('ul.first').find('.foo') 
.CSss('background-color', 'red') 
.end().find('.bar') 
.Css('background-color', 'green') 
.end(); 


最 后 这 个 end() 不 是 必需 的 ， 因 为 我 们 随后 会 丢弃 这 个 jQuery 对 象 。 不 过 ， 如 果 按 照 这 种 形 
式 编写 代码 ，end() 就 能 提供 视觉 上 的 对 称 ， 以 及 规整 程序 的 感觉 ， 至 少 对 于 开发 者 来 说 更 易 


jQuery 通 万 -ed() 方法 
实例 


通过 为 index 为 2 的 div 添加 适当 的 类 ， 将 其 变 为 蓝 色 : 


$("body").find("div").eq(2).addclass("blue"); 
ch 、 : 
ed() 方法 将 匹配 元 素 集 缩减 值 指 定 index 上 的 一 个 。 


语法 


.eq(_index_) 


参数 描述 
往 回 计数 。 


详细 说 明 
如 果 给 定 表示 DOM 元 素 集 合 的 jQuery 对 象 ，.eq() 方法 会 用 集合 中 的 一 个 元 素 构造 一 个 新 的 
jQuery 对 象 。 所 使 用 的 index 参数 标示 集合 中 元 素 的 位 置 。 


请 看 下 面 这 个 简单 的 列表 : 


<ul> 
<l1i>list item 1</1i> 
<l1i>list item 2</1i> 
<l1i>list item 3</1i> 
<l1i>list item 4</1i> 
<l1i>list item 5</1i> 
</ul> 


例子 1 
我 们 可 以 把 该 方法 应 用 到 这 个 列表 项 目 集 : 


$('1i').eq(2).css('background-color', 'red'); 


这 个 调用 的 结果 是 为 项 目 3 设置 了 红色 背景 。 请 注意 ，index 是 基于 需 的 ， 并 且 是 在 jQuery 
对 象 中 引用 元 素 的 位 置 ， 而 不 是 在 DOM 树 中 。 


例子 2 
如 果 提 供 负数 ， 则 指示 从 集合 结尾 开始 的 位 置 ， 而 不 是 从 开头 开始 。 例 如 : 


$('1i').eq(-2).css('background-color', 'red'); 
这 次 ， 项 目 4 的 背景 变 为 红色 ， 这 是 因为 它 是 集合 结尾 开始 的 第 二 个 。 


例子 3 


如 果 无 法 根据 指定 的 index 参数 找到 元 素 ， 则 该 方法 构造 带 有 空 集 的 jQuery 对 象 ，length 属 
性 为 0。 


$('1i').eq(5).css('background-color', 'red'); 


这 里 ， 没 有 列表 项 会 变 为 红色 ， 这 是 因为 .eq(5) 指示 的 第 六 个 列表 项 。 


jQuery 通 万 -filter() 方法 


实例 
改变 所 有 div 的 颜色 ， 然 后 向 类 名 为 "middle" 的 类 添加 边框 : 


$("div").css("background", "#c8ebcc") 
.filter(".middle") 
.Css("border-color", "red"); 


ch 、 S 
filter() 方法 将 匹配 元 素 集合 缩减 为 匹配 指定 选择 器 的 元 素 。 


语法 


.filter(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 供 匹 配 当前 元 素 集 合 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 表 示 DOM 元 素 集 合 的 jQuery 对 象 ，.filter() 方法 会 用 匹配 元 素 的 子 集 构 造 一 个 新 的 
jQuery 对 象 。 所 使 用 的 选择 器 会 测试 每 个 元 素 ; 所 有 匹配 该 选择 器 的 元 素 都 会 包含 在 结 
中 。 


请 思考 下 面 这 个 拥有 简单 列表 的 页 面 : 


<ul> 
<l1i>list item 1</1i> 
<l1i>list item 2</1i> 
<l1i>list item 3</1i> 
<l1i>list item 4</1i> 
<l1i>list item 5</1i> 
<l1i>list item 6</1i> 

</ul> 


我 们 可 以 向 这 个 列表 项 集合 应 用 该 方法 : 


$('1i').filter(':even').css('background-color', 'red'); 


此 调用 的 结果 是 将 项 目 1, 3, 5 的 背景 设置 为 红色 ， 这 是 因为 它们 都 匹配 选择 器 (回忆 
下 ，:even 和 :odd 均 使 用 基于 0 的 index) 。 


使 用 过 滤 画 数 


使 用 该 方法 的 第 二 个 形式 是 ， 通 过 辑 数 而 不 是 选择 器 来 第 先 元素。 对 于 每 个 元 素 ， 如 果 该 图 


数 返回 true， 则 元 素 会 被 包含 在 已 得 选 集合 中 ; 否则 ， 会 排除 这 个 元 素 。 
请 看 下 面 这 上段 积 显 复杂 的 HTML 片段 : 


<ul> 
<li><strong>list</strong> item 1 - one strong tag</1i> 
<l1i><strong>list</strong> item <strong>2</strong> 
- two <span>strong tags</span></1i> 
<1i>list item 3</1i> 
<1i>list Item 4</1i> 
<1i>list Item 5</1i> 
<1i>list Item 6</1i> 
</ul> 


我 们 可 以 选取 这 些 列表 项 ， 然 后 基于 其 内 容 来 得 选 它们 : 


$('1i').filter(function(index) { 
return $('strong', this).length == 1; 
}).css('background-color', 'red'); 


jQuery 通 历 - find() 方法 


实例 
搜索 所 有 段落 中 的 后 代 span 元 素 ， 并 将 其 颜色 设置 为 红色 : 


$("p").find("span").css('color','red'); 
cb 、 : 
find() 方法 获得 当前 元 素 集合 中 每 个 元 素 的 后 代 ， 通 过 选择 器 、jQuery 对 象 或 元 素来 筛选 。 


语法 


.find(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 供 匹 配 当前 元 素 集 合 的 选择 器 表达 式 。 
详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.find() 方法 允许 我 们 在 DOM 树 中 搜索 这 
些 元 素 的 后 代 ， 并 用 匹配 元 素来 构造 一 个 新 的 jQuery 对 象 。.find() 与 .children() 方法 类 似 ， 
不 同 的 是 后 者 仅 治 着 DOM 树 向 下 通 历 单一 层级 。 

.find() 方法 第 一 个 明显 特征 是 ， 其 接受 的 选择 器 表达 式 与 我 们 向 $() 函数 传递 的 表达 式 的 类 型 
相同 。 将 通过 测试 这 些 元 素 是 否 匹 配 该 表达 式 来 对 元 素 进 行 过 滤 。 


请 思考 下 面 这 个 简单 的 铸 套 列表 : 


<ul class="]evel-1"> 
<li class="item-i">I</1i> 
<1li class="item-ii">II 
<ul class="]Jevel-2"> 
<li class="item-a">A</1i> 
<li class="item-b">B 
<ul class="]evel-3"> 
<11 class="item-1">1</1i> 
<11 class="item-2">2</1i> 
<11 class="item-3">3</1i> 


</ul> 
</1i> 
<li class="item-c">C</1i> 
</ul> 
</1i> 
<li class="item-iii">III</1i> 
</ul> 


我 们 将 从 列表 i| 开始 来 查找 其 中 的 列表 项 : 
$('1i,.item-ii').find('1i').css('background-color', 'red'); 

这 次 调研 的 结果 是 ， 项 目 A、B、1、2、3 以 及 C 均 被 设置 了 红色 背景 。 即 使 项 目 i| 匹配 选 

择 器 表达 式 ， 它 也 不 会 被 包含 在 结果 中 ; 只 会 对 后 代 进 行 匹配 。 


与 其 他 的 树 通 历 方法 不 同 ， 选 择 器 表达 式 对 于 .find() 是 必需 的 参数 。 如 果 我 们 需要 实现 对 所 
有 后 代 元 素 的 取 回 ， 可 以 传递 通 配 选 择 器 ”。 
选择 器 context 是 由 .find() 方法 实现 的 ; 因此 ，$('liitem-ii").find('i") 等 价 于 $i', "i.item-ii")。 


对 于 jQuery 1.6， 我 们 还 可 以 使 用 给 定 的 jQuery 集合 或 元 素来 进行 筛选。 还 是 上 面 的 从 套 列 
表 ， 我 们 首先 这 样 写 : 


var $allListElements = $('1i'); 
然后 将 这 个 jQuery 对 象 传递 给 find 方法 : 


$('1i,.item-ii').find( $allListElements ); 


上 面 的 代码 会 返回 一 个 jQuery 集合 ， 其 中 包含 属于 列表 1| 后 代 的 列表 元 素 。 
类 似 地 ， 也 可 以 传递 一 个 元 素 : 


Var Item1 = $(']1i.item-1')[90]; 
$('1i.item-ii').find( Item1 ).css('background-color', 'red'); 


这 次 调用 的 结果 是 项 目 1 被 设置 为 红色 背景 。 


jQuery 通 万 - first() 方法 


高 完 显示 段落 中 的 第 一 个 span : 


$("p span").first().addclass('highlight'); 


定义 和 用 法 
first() 将 匹配 元 素 集合 缩减 为 集合 中 的 第 一 个 元 素 。 
语法 


.first() 


详细 说 明 

如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.first() 方法 会 用 第 一 个 匹配 元 素 构 造 一 个 
新 的 jQuery 对 象 。 

请 思考 下 面 这 个 带 有 简单 列表 的 页 面 : 


<ul> 
<l1i>list item 1</1i> 
<l1i>list item 2</1i> 
<l1i>list item 3</1i> 
<l1i>list item 4</1i> 
<l1i>list item 5</1i> 
</ul> 


我 们 可 以 对 这 个 列表 项 集合 应 用 该 方法 : 


$('1i').first().css('background-color', 'red'); 


这 次 调用 的 结果 是 ， 第 一 个 项 目 被 设置 为 红色 背景 。 


jQuery 通 历 - has() 方法 


例 


仿 测 某 个 元 素 是 否 在 另 一 个 元 素 中 : 


将 


$("ul") .append("<li>" + ($("ul").has("1i").length ? "Yes" : "No") + "</1i>"); 
$("ul") .has("Li").addclass("ful1"); 


中 、 : 
has() 将 匹配 元 素 集合 缩减 为 拥有 匹配 指定 选择 器 或 DOM 元 素 的 后 代 的 子 集 。 


语法 


.has(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 匹 配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.has() 方法 用 匹配 元 素 的 子 集 来 构造 一 个 
新 的 jQuery 对 象 。 所 使 用 的 选择 器 用 于 检测 匹配 元 素 的 后 代 ; 如 果 任 何 后 代 元 素 匹 配 该 选择 
器 ， 该 元 素 将 被 包含 在 结果 中 。 


请 思考 下 面 这 个 带 有 族 套 列表 的 页 面 : 


<ul> 
<l1i>list item 1</1i> 
<l1i>list item 2 
<ul> 
<l1i>list item 2-a</1i> 
<1i>list item 2-b</1i> 
</ul> 
</1i> 
<l1i>list item 3</1i> 
<l1i>list item 4</1i> 
</ul> 


我 们 可 以 对 列表 项 集合 应 用 该 方法 ， 就 像 这 样 : 


$('1i').has('ul').css('background-color', 'red'); 


该 调用 的 结果 是 ， 项 目 2 的 背景 被 设置 为 红色 ， 这 是 因为 该 项 目 是 后 代 中 唯一 拥有 <ul> 的 


<|i>。 


jQuery 通 历 - is() 方法 


例 


返回 false， 因 为 input 元 素 的 父 元 素 是 p 元 素 : 


将 


var isFormParent = $("input[type='checkbox']").parent().is("form"); 
$("div").text("isFormParent = " + isFormParent); 


定义 和 用 法 


is() 根据 选择 器 、 元 素 或 jQuery 对 象 来 检测 匹配 元 素 集 合 ， 如 果 这 些 元 素 中 至 少 有 一 个 元 素 
匹配 给 定 的 参数 ， 则 返回 true。 


语法 


.is(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 匹 配 元 素 的 选择 器 表达 式 。 


详细 说 明 
与 其 他 筛选 方法 不 同 ，.is() 不 创建 新 的 jQuery 对 象 。 相 反 ， 它 允许 我 们 在 不 修改 jQuery 对 
象 内 容 的 情况 下 对 其 进行 检测 。 这 在 callback 内 部 通常 比较 有 用 ， 比 如 事件 义理 程序 。 


假设 我 们 有 一 个 列表 ， 其 中 两 个 项 目 包含 子 元 素 : 


<ul> 
<l1i>list <strong>item 1</strong></1i> 
<l1i><span>list item 2</span></1i> 
<1i>list Item 3</1i> 

</ul> 


您 可 以 向 <ul> 元 素 添 加 click 处 理 程 序 ， 然 后 把 代码 限制 为 只 有 当 列 表 项 本 身 ， 而 非 子 元 
素 ， 被 点 击 时 才 进 行 触发 : 


$("u1L").click(function(event ) { 
var $target = $(event .target ) ， 
if ( $target.is("11") ) { 
$target.css("background-color", "red"); 


} 
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现在 ， 当 用 户 点 击 的 是 第 一 个 列表 项 中 的 单词 "list" 或 第 三 个 列表 项 中 的 任何 单词 时 ， 被 点 击 
的 列表 项 会 被 设置 为 红色 背景 。 不 过 ， 当 用 户 点 击 第 一 个 列表 项 中 的 item 1 或 第 二 个 列表 项 
中 的 任何 单词 时 ， 都 不 会 有 任何 变化 ， 这 是 因为 这 上 面 的 情况 中 ， 事 件 的 目标 分 别 是 


<strong> 是 <span>。 


请 您 注意 ， 对 于 带 有 位 置 性 选择 器 的 选择 器 表达 式 字符 串 ， 比 如 :first、:gt() 或 者 :even， 位 
置 性 筛选 是 针对 传递 到 .is() 的 jQuery 对 象 进 行 的 ， 而 非 针对 包含 文档 。 所 以 对 于 上 面 的 
HTML 来 说 ， 诸 如 $("li:first").is("li:last") 的 表达 式 返回 true， 但 是 $("li:first-child").is("li:last- 
child") 返回 false。 


使 用 范 数 


该 方法 的 第 二 种 用 法 是 ， 对 基于 豆 数 而 非 选择 器 的 相关 元 素 的 表达 式 进 行 求 值 。 对 于 每 个 元 
素来 说 ， 如 果 该 函数 返回 true， 则 .is() 也 返回 true。 例 如 ， 下 面 是 稍微 复杂 的 HTML 片段 : 


<ul> 
<li><strong>list</strong> item 1 - one strong tag</1i> 
<l1i><strong>list</strong> item <strong>2</strong> - 
two <span>strong tags</span></1i> 
<1i>list item 3</1i> 
<1i>list Item 4</1i> 
<1i>list Item 5</1i> 
</ul> 


您 可 以 向 每 个 <li> 添加 click 处 理 程序 ， 以 计算 在 被 点 击 的 <li> 内 部 <strong> 元 素 的 数目 : 


$("1i").click(function() { 
var $11i = $(this), 
isWithTwo = $1i.is(function() { 
return $('strong', this).length === 2; 


}); 
if ( iswithTwo ) { 
$1i.css("background-color", "green"); 


} else { 
$1i.css("background-color", "red"); 


} 
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jQuery 通 历 - last() 方法 


高 之 显示 段落 中 的 最 后 一 个 span : 


$("p span").last().addclass('highlight"'); 


定义 和 用 法 


last() 将 匹配 元 素 集合 缩减 为 集合 中 的 最 后 一 个 元 素 。 


语法 
.last() 


详细 说 明 

如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.last() 方法 会 用 最 后 一 个 匹配 元 素 构 造 一 
个 新 的 jQuery 对 象 。 

请 思考 下 面 这 个 带 有 简单 列表 的 页 面 : 


<ul> 
<l1i>list item 1</1i> 
<l1i>list item 2</1i> 
<l1i>list item 3</1i> 
<l1i>list item 4</1i> 
<l1i>list item 5</1i> 
</ul> 


我 们 可 以 对 这 个 列表 项 集合 应 用 该 方法 : 


$('1i').last().css('background-color', 'red'); 


这 次 调用 的 结果 是 ， 最 后 一 个 项 目 被 设置 为 红色 背景 。 


jQuery 通 万 - map() 方法 


实例 
构建 表单 中 所 有 值 的 列表 : 


$("p").append( $("input").map(function(){ 
return $(this).val(); 
}).get().join(", ") ); 


定义 和 用 法 
map() 把 每 个 元 素 通 过 函数 传递 到 当前 匹配 集合 中 ， 生 成 包含 返回 值 的 新 的 jQuery 对 象 。 


语法 


.map(_callback(index,domElement )_) 


callback(index, domEIement) 对 当前 集合 中 的 每 个 元 素 调用 的 函数 对 象 。 


详细 说 明 
由 于 返回 值 是 jQuery 封装 的 数组 ， 使 用 get() 来 处 理 返 回 的 对 象 以 得 到 基础 的 数组 。 


.map() 方法 对 于 获得 或 设置 元 素 集 的 值 特别 有 用 。 请 思考 下 面 这 个 带 有 一 系列 复 选 框 的 表 
单 : 


<form method="post" action=""> 
<fieldset> 
<div> 
<label for="two">2</label> 
<input type="checkbox" value="2" id="two" name="number[]"> 
</div> 
<div> 
<label for="four">4</label> 
<input type="checkbox" value="4" id="four" name="number[]"> 
</div> 
<div> 
<label for="six">6</label> 
<input type="checkbox" value="6" id="six" name="number[]"> 
</div> 
<div> 
<label for="eight">8</label> 
<input type="checkbox" value="8" id="eight" name="number[]"> 
</div> 
</fieldset> 
</form> 


我 们 能 够 获得 复 选 框 ID 组 成 的 喜 号 分 隔 的 列表 : 


$(':checkbox').map(function() { 
return this.id; 


}).get().join(', '); 


本 次 调用 的 结果 是 字符 串 : "two,four,six,eight"。 


在 callback 豆 数 内 部 ，this 引用 每 次 迭代 的 当前 DOM 元 素 。 该 函数 可 返回 单独 的 数据 项 ， 或 
者 是 要 被 插入 结果 集中 的 数据 项 的 数组 。 如 果 返 回 的 是 数组 ， 数 组 内 的 元 素 会 被 插入 集合 
中 。 如 果 画 数 返 回 null 或 undefined， 则 不 会 插入 任何 元 素 。 


jQuery 通 万 - next() 方法 


例 


查找 每 个 段落 的 下 一 个 同胞 元 素 ， 仅 选中 类 名 为 "selected" 的 段落 : 


将 


$("p").next(".selected").css("background", "yellow"); 


定义 和 用 法 


next() 获得 匹配 元 素 集合 中 每 个 元 素 紧邻 的 同胞 元 素 。 如 果 提 供 选 择 器 ， 则 取 回 匹配 该 选择 器 
的 下 一 个 同胞 元 素 。 


语法 


,next(_Selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 
如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.next() 方法 允许 我 们 搜索 DOM 树 中 的 元 
素 紧 跟 的 同胞 元 素 ， 并 用 匹配 元 素 构 造 新 的 jQuery 对 象 。 


该 方法 接受 可 选 的 选择 器 表达 式 ， 类 型 与 我 传递 到 $() 图 数 中 的 相同 。 如 果 紧 跟 的 同胞 元 素 匹 
配 该 选择 器 ， 则 会 留 在 新 构造 的 jQuery 对 象 中 ; 否则 会 将 之 排除 。 


请 思考 下 面 这 个 带 有 简单 列表 的 页 面 : 


<ul> 
<1i>list item 1</1i> 
<1i>list item 2</1i> 
<1li class="third-item">list item 3</1i> 
<1i>list item 4</1i> 
<1i>list item 5</1i> 
</ul> 


如 果 我 们 从 项 目 三 开始 ， 则 能 够 找到 其 后 出 现 的 元 素 : 


$('1i,.third-item').next().css('background-color', 'red'); 


这 次 调用 的 结果 是 ， 项 目 4 被 设置 为 红色 背景 。 由 于 我 们 没有 应 用 选择 器 表达 式 ， 紧 跟 的 这 
个 元 素 很 明确 地 被 包括 为 对 象 的 一 部 分 。 如 果 我 们 已 经 应 用 了 选择 器 ， 在 包含 它 之 前 会 检测 
是 否 匹 配 。 


jQuery 通 万 - nextAII() 方法 


例 


查找 第 一 个 div 之 后 的 所 有 类 名 ， 并 为 他 们 添加 类 名 : 


将 


$("div:first").nextAll().addclass("after"); 
= 、 
nextAll() 获得 匹配 元 素 集 合 中 每 个 元 素 的 所 有 跟随 的 同胞 元 素 ， 由 选择 器 筛选 是 可 选 的 。 


语法 


.NextAll(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.nextAll() 方法 允许 我 们 搜索 DOM 树 中 的 
元 素 跟 随 的 同胞 元 素 ， 并 用 匹配 元 素 构 造 新 的 jQuery 对 象 。 


该 方法 接受 可 选 的 选择 器 表达 式 ， 类 型 与 我 传递 到 $() 画 数 中 的 相同 。 如 果 应 用 选择 器 ， 则 将 
通过 检测 元 素 是 否 匹配 来 对 它们 进行 筛选 。 


请 思考 下 面 这 个 带 有 简单 列表 的 页 面 : 


<ul> 
<1i>list item 1</1i> 
<1i>list item 2</1i> 
<11 class="third-item">list Item 3</1i> 
<1i>list item 4</1i> 
<1i>list item 5</1i> 
</ul> 


如 果 我 们 从 项 目 三 开始 ， 那 么 我 们 能 够 找到 其 后 出 现 的 元 素 : 


$('1i,.third-item').nextAll().css('background-color', 'red'); 


这 次 调用 的 结果 是 ， 项 目 4 和 5 被 设置 为 红色 背景 。 由 于 我 们 没有 应 用 选择 器 表达 式 ， 紧 跟 
的 这 个 元 素 很 明确 地 被 包括 为 对 象 的 一 部 分 。 如 果 我 们 已 经 应 用 了 选择 器 ， 在 包含 它 之 前 会 


仿 测 是 否 匹 配 。 


jQuery 通 万 - nextUntil() 方法 


例 


查找 跟随 <dt id="term-2"> 的 同胞 元 素 ， 直 到 下 一 个 <dt>， 然 后 将 它们 设置 为 红色 背景 色 。 
同时 ， 找 到 跟随 <dt id="term-1"> 的 <dd> 同胞 元 素 ， 直 到 <dt id="term-3">， 并 为 它们 设置 
蓝 色 文本 颜色 。 


将 


$("#term-2").nextUntil("dt").css("background-color", "red"); 
var term3 = document.getElementById("term-3"); 
$("#term-1").nextUntil(term3, "dd").css("color", "blue"); 


定义 和 用 法 


nextUntil() 获得 每 个 元 素 所 有 跟随 的 同胞 元 素 ， 但 不 包括 被 选择 器 、DOM 节点 或 已 传递 的 
jQuery 对 象 匹 配 的 元 素 。 
语法 1 


.NextUntil(_selector_,_filter_) 


参数 描述 
selector ， 字符 串 值 ， 包 含 指示 在 何 处 停止 匹配 跟随 的 同胞 元 素 的 选择 器 表达 式 。 
filter 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 
语法 2 


.NextUntil(_element_,_filter_) 


参数 描述 
element 指示 在 何人 处 停止 匹配 跟随 的 同胞 元 素 的 DOM 节点 或 jQuery 对 象 。 
filter 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集 合 的 jQuery 对 象 ，.nextUntil() 方法 允许 我 们 搜索 DOM 树 中 
的 元 素 跟 随 的 同胞 元 素 ， 当 遇 到 被 该 方法 的 参数 所 匹配 的 元 素 时 会 停止 搜索 。 返 回 的 新 
jQuery 对 象 包含 所 有 跟随 的 同胞 元 素 ， 但 不 包含 被 参数 匹配 的 元 素 。 

如 果 选 择 器 不 匹配 或 未 规定 选择 器 ， 则 会 选取 所 有 跟随 的 同胞 ; 如 果 不 提供 供 筛选 的 选择 
器 ， 则 该 方法 选取 的 元 素 与 .nextAll() 方法 相同 。 

对 于 jQuery 1.6，DOM 节点 或 jQuery 对 象 ， 而 不 是 选择 器 ， 可 传递 到 .nextUntil() 方法 。 


该 方法 接受 可 选 的 选择 器 表达 式 作 为 其 第 二 参数 。 如 果 指 定 该 参数 ， 则 将 通过 检测 元 素 是 否 
匹配 该 选择 器 来 筛选 它们 。 


jQuery 通 历 - not() 方法 


实例 
从 包含 所 有 段落 的 集合 中 删除 id 为 "selected" 的 段落 : 


$("p").not("#selected") 
十 、 > 
not() 从 匹配 元 素 集 合 中 删除 元 素 。 


语法 1 


.Not(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 
语法 2 


,not(_element_) 


参数 描述 
element 一 个 或 多 个 需要 从 匹配 集中 删除 的 DOM 元 素 。 
语法 3 


.Not(_function(index)_) 


参数 描述 
function(index) 用 于 检测 集合 中 每 个 元 素 的 函数 。this 是 当前 DOM 元 素 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集 合 的 jQuery 对 象 ，.not() 方法 会 用 匹配 元 素 的 子 集 构 造 一 -4 
新 的 jQuery 对 象 。 所 应 用 的 选择 器 会 检测 每 个 元 素 ; 不 匹配 该 选择 器 的 元 素 会 被 包含 在 结果 


请 思考 下 面 这 个 带 有 简单 列表 的 页 面 : 


<ul> 
<l1i>list item 1</1i> 
<l1i>list item 2</1i> 
<l1i>list item 3</1i> 
<l1i>list item 4</1i> 
<l1i>list item 5</1i> 
</ul> 


我 们 可 以 向 列表 项 集 应 用 该 方法 : 


$('1i').not(':even').css('background-color', 'red'); 


这 次 调用 的 结果 是 将 项 目 2 和 4 设置 为 红色 背景 ， 这 是 因为 它们 不 匹配 选择 器 (回忆 一 
下 ，:even 和 :odd 均 使 用 基于 0 的 index) 。 


移 除 具 体 的 元 乘 


.not() 方法 的 第 二 个 版 本 允许 我 们 从 匹配 集中 删除 元 素 ， 假 设 我 们 之 前 已 经 通过 其 他 手段 找到 
了 这 些 元 素 。 例 如 ， 设 想 一 个 列表 已 经 将 id 应 用 到 其 中 一 个 项 目 中 : 


<ul> 
<l1i>list item 1</1i> 
<l1i>list item 2</1i> 
<1li id="notli">list Item 3</1i> 
<l1i>list item 4</1i> 
<l1i>list item 5</1i> 
</ul> 


我 们 可 以 使 用 原生 的 JavaScript 函数 getElementByld() 读 取 第 三 个 列表 项 ， 然 后 把 它 从 
jQuery 对 象 中 删除 : 

$('1i').not(document.getElementById('not1i')).css('background-color', 'red'); 
这 条 语句 改变 项 目 1、2、3 和 5 的 背景 色 。 我 们 可 以 用 更 简单 的 jQuery 表达 式 来 完成 同样 的 
事情 ， 但 是 这 项 技术 在 比方 说 其 他 库 提供 对 纯 DOM 节点 的 引用 时 会 很 有 用 。 


对 于 jQuery 1.4，.not() 方法 能 够 采用 函数 作为 其 参数 ， 与 .filter() 方法 相同 。 其 函数 返回 true 
的 元 素 会 被 排除 在 过 小 集 之 外 ; 所 有 其 他 元 素 将 被 包含 其 中 。 


jQuery 通 万 - offsetParent() 方法 


将 | 


实例 
设置 类 名 为 item-a 的 ji 元 素 的 最 近 定 位 父 元 素 的 背景 


$('1i.item-a').offsetParent().css('background-color', 'red'); 


定义 和 用 法 
offsetParent() 获得 被 定位 的 最 近 祖 先 元 素 。 
语法 


.offsetParent() 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.offsetParent() 方法 允许 我 们 搜索 DOM 树 
中 元 素 的 祖先 ， 并 构造 一 个 由 最 近 的 定位 祖先 元 素 包围 的 jQuery 对 象 。 定 位 元 素 指 的 是 ， 元 
素 的 CSS position 属性 设置 为 relative、absolute 或 fixed。 在 为 表演 动画 计算 偏 移 或 在 页 面 
上 放置 对 象 时 ， 该 信息 会 很 有 用 处 。 


请 思考 带 有 基本 谋 套 列表 的 页 面 ， 其 中 带 有 定位 元 素 : 


<ul class="]evel-1"> 
<li class="item-i">I</1i> 
<]li class="item-ii" style="position: relative;">II 
<ul class="]Jevel-2"> 
<li class="item-a">A</1i> 
<li class="item-b">B 
<ul class="]Jevel-3"> 
<11 class="item-1">1</1i> 
<11 class="item-2">2</1i> 
<11 class="item-3">3</1i> 


</ul> 
</1i> 
<li class="item-c">C</1i> 
</ul> 
</1i> 
<li class="item-iii">III</1i> 
</ul> 


如 果 我 们 从 项 目 A 开始， 我 们 可 以 找到 其 定位 祖先 元 素 : 


$('1i.item-a').offsetParent().css('background-color', 'red'); 


这 会 改变 被 定位 的 项 目 1| 的 背景 色 。 


jQuery 通 万 - parent() 方法 


/> 
实例 
查找 每 个 段落 的 带 有 "selected" 类 的 父 元 素 : 


$("p").parent(".selected") 


ch 、 > 
parent() 获得 当前 匹配 元 素 集 合 中 每 个 元 素 的 父 元 素 ， 使 用 选择 器 进行 筛选 是 可 选 的 。 


.parent(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.parent() 方法 允许 我 们 在 DOM 树 中 搜索 
这 些 元 素 的 父 元 素 ， 并 用 匹配 元 素 构 造 一 个 新 的 jQuery 对 象 。.parents() 和 .parent() 方法 类 
似 ， 不 同 的 是 后 者 治 DOM 树 向 上 通 历 单一 层级 。 


该 方法 接受 可 选 的 选择 器 表达 式 ， 与 我 们 向 $() 函数 中 传递 的 参数 类 型 相同 。 如 果 应 用 这 个 选 
择 器 ， 则 将 通过 检测 元 素 是 否 匹 配 该 选择 器 对 元 素 进 行 筛选 。 


请 思考 这 个 带 有 基本 的 谋 套 列表 的 页 面 : 


<ul class="]evel-1"> 
<li class="item-i">I</1i> 
<1li class="item-ii">II 
<ul class="]evel-2"> 
<1li class="item-a">A</1i> 
<li class="item-b">B 
<ul class="]level-3"> 
<11 class="item-1">1</1i> 
<11 class="item-2">2</1i> 
<11 class="item-3">3</1i> 
</ul> 
</1i> 
<li class="item-c">C</1i> 
</ul> 
</1i> 
<1li class="item-iii">III</1i> 
</ul> 


如 果 我 们 从 项 目 A 开始 ， 则 可 找到 其 父 元 素 : 


$('1i.item-a').parent().css('background-color', 'red'); 


此 次 调用 的 结果 是 ， 为 level-2 列表 设置 红色 背景 。 由 于 我 们 未 应 用 选择 器 表达 式 ， 父 元 素 很 
自然 地 成 为 了 对 象 的 一 部 分 。 如 果 已 应 用 选择 器 ， 则 会 在 包含 元 素 之 前 ， 检 测 元 素 是 否 匹 配 
选择 器 。 


jQuery 通 万 - parents() 方法 
实例 


查找 每 个 b 元 素 的 所 有 父 元 素 : 


$("b").parents() 
定义 和 用 法 


parents() 获得 当前 匹配 元 素 集合 中 每 个 元 素 的 祖先 元 素 ， 使 用 选择 器 进行 第 选 是 可 选 的 。 


.parents(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 
详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.parents() 方法 允许 我 们 在 DOM 树 中 搜索 
这 些 元 素 的 祖先 元 素 ， 并 用 从 最 近 的 父 元 素 向 上 的 顺序 排列 的 匹配 元 素 构造 一 个 新 的 jQuery 
对 象 。 元 素 是 按照 从 最 近 的 父 元 素 向 外 的 顺序 被 返回 的 。.parents() 和 .parent() 方法 类 似 ， 不 
同 的 是 后 者 治 DOM 树 向 上 通 厉 单一 层级 。 


该 方法 接受 可 选 的 选择 器 表达 式 ， 和 与 我 们 向 $() 画 数 中 传递 的 参数 类 型 相同 。 如 果 应 用 这 个 选 
择 器 ， 则 将 通过 检测 元 素 是 否 匹 配 该 选择 器 对 元 素 进 行 筛选 。 


请 思考 这 个 带 有 基本 的 谋 套 列表 的 页 面 : 


<ul class="]evel-1"> 
<li class="item-i">I</1i> 
<1li class="item-ii">II 
<ul class="]Jevel-2"> 
<li class="item-a">A</1i> 
<li class="item-b">B 
<ul class="]evel-3"> 
<11 class="item-1">1</1i> 
<11 class="item-2">2</1i> 
<11 class="item-3">3</1i> 


</ul> 
</1i> 
<li class="item-c">C</1i> 
</ul> 
</1i> 
<li class="item-iii">III</1i> 
</ul> 


如 果 我 们 从 项 目 A 开始 ， 则 可 找到 其 祖先 元 素 : 


$('1i.item-a').parents().css('background-color', 'red'); 


此 次 调用 的 结果 是 ，level-2 列表 、 项 目 中 以 及 level-1 列表 等 元 素 ( 治 DOM 树 一 路 向 上 直到 
<html>) 设置 红色 背景 。 由 于 我 们 未 应 用 选择 器 表达 式 ， 父 元 素 很 自然 地 成 为 了 对 象 的 一 部 
分 。 如 果 已 应 用 选择 器 ， 则 会 在 包含 元 素 之 前 ， 检 测 元 素 是 否 匹 配 选 择 器 。 由 于 我 们 未 应 用 
选择 器 表达 式 ， 所 有 祖先 元 素 都 是 返回 的 jQuery 对 象 的 组 成 部 分 。 如 果 已 应 用 选择 器 ， 则 只 
会 包含 其 中 的 匹配 项 目 。 


jQuery 通 万 - parentsUntil() 方法 


/> 

实例 

查找 <li class="item-a"> 的 祖先 元 素 ， 直 到 <ul class="level-1">， 并 将 它们 设置 为 红色 背景 。 
同时 ， 找 到 <li class="item-2"> 的 所 有 类 名 为 "yes" 的 祖先 元 素 ， 直 到 <ul class="level-1">， 
然 户 为 它们 设置 蓝 色 边框 : 


$("1i,.item-a").parentsUntil(".level-1") 
.Css("background-color", "red"); 


$("1i,.item-2").parentsUntil( $("ul.level-1"), ".yes" ) 


.Css("border", "3px solid blue"); 


定义 和 用 法 


+ 大 日 


parentsUntil() 获 繁 
DOM 节点 或 jQuery 对 象 匹配 的 元 素 。 


当前 匹配 元 素 集 合 中 每 个 元 素 的 祖先 元 素 ， 直 到 (但 不 包括 ) 被 选择 器 、 


语法 1 


.parentsUntil(_selector_,_filter_) 


参数 


selector ”可 选 。 字 
字 


描述 
符 串 值 ， 规 定 在 何 处 停止 对 祖先 元 素 进行 匹配 的 选择 器 表达 式 。 


filter 可 选 。 字 符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


语法 2 


.parentsUntil(_element_,_filter_) 


参数 描述 
element ”可 选 。DOM 节点 或 jQuery 对 象 ， 指 示 在 何 处 停止 对 和 祖先 元 素 的 匹配 。 
filter 可 选 。 字 符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.parentsUntil() 方法 允许 我 们 在 DOM 树 中 
搜索 这 些 元 素 的 祖先 元 素 ， 直 到 遇 到 被 选择 器 (传递 到 方法 中 的 参数 ) 匹配 的 元 素 为 止 。 返 
回 的 jQuery 对 象 包含 所 有 祖先 元 素 ， 但 不 包括 由 .parentsUntil() 方法 规定 的 选择 器 匹配 的 那 
个 元 素 。 


如 果 不 匹 配 或 未 应 用 选择 器 ， 则 将 选区 所 有 祖先 元 素 ; 在 这 种 情况 下 ， 该 方法 选取 的 元 素 与 
未 提供 选择 器 时 的 .parents() 相同 。 

对 于 jQuery 1.6，DOM 节点 或 jQuery 对 象 ， 而 不 是 选择 器 ， 可 用 作 .parentsUntil() 方法 的 第 
一 个 参数 。 

该 方法 接受 可 选 的 选择 器 表达 式 作为 其 第 二 参数 。 如 果 应 用 这 个 参数 ， 则 将 通过 检测 元 素 是 
否 匹 配 该 选择 器 对 元 素 进 行 筛选 。 


jQuery 通 万 - prev() 方法 
实例 


检索 每 个 段落 ， 找 到 类 名 为 "selected" 的 前 一 个 同胞 元 素 : 


$("p").prev(".selected") 
定义 和 用 法 


prev() 获得 匹配 元 素 集 合 中 每 个 元 素 紧 邻 的 前 一 个 同胞 元 素 ， 通 过 选择 器 进行 筛选 是 可 选 的 。 


,prev(_Selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集 合 的 jQuery 对 象 ，.prev() 方法 允许 我 们 在 DOM 树 中 搜索 这 
些 元 素 的 前 一 个 同胞 元 素 ， 并 用 匹配 元 素 构 造 一 个 新 的 jQuery 对 象 。 


该 方法 接受 可 选 的 选择 器 表达 式 ， 与 我 们 向 $() 国 数 中 传递 的 参数 类 型 相同 。 如 果 应 用 这 个 选 
择 器 ， 则 将 通过 检测 元 素 是 否 匹 配 该 选择 器 对 元 素 进 行 筛选 。 


请 思考 这 个 带 有 基本 的 谋 套 列表 的 页 面 : 


<ul> 
<1i>list item 1</1i> 
<1i>list item 2</1i> 
<1li class="third-item">list item 3</1i> 
<1i>list item 4</1i> 
<1i>list item 5</1i> 
</ul> 


如 果 我 们 从 第 三 个 项 目 开始 ， 则 可 找到 该 元 素 之 间 的 紧邻 元 素 : 


$('1i,.third-item').prev().css('background-color', 'red'); 


此 处 调用 的 结果 是 将 项 目 2 设置 为 红色 背景 。 由 于 我 们 未 应 用 选择 器 表达 式 ， 前 一 个 元 素 很 
自然 地 成 为 了 对 象 的 一 部 分 。 如 果 已 应 用 选择 器 ， 则 会 在 包含 元 素 之 前 ， 检 测 元 素 是 否 匹 配 
选择 器 。 


jQuery 通 万 - prevAII() 方法 


定位 最 后 一 个 div 之 前 的 所 有 div， 并 为 它们 添加 类 : 


$("div:last").prevAll().addclass("before"); 


定义 和 用 法 


prevAll() 获得 当前 匹配 元 素 集合 中 每 个 元 素 的 前 面 的 同胞 元 素 ， 使 用 选择 器 进行 第 选 是 可 选 
的 。 


语法 


.prevAll(_selector._) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 
如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.prevAII() 方法 允许 我 们 在 DOM 树 中 搜索 
这 些 元 素 前 面 的 同胞 元 素 ， 并 用 匹配 元 素 构造 一 个 新 的 jQuery 对 象 。 


该 方法 接受 可 选 的 选择 器 表达 式 ， 与 我 们 向 $() 函数 中 传递 的 参数 类 型 相同 。 如 果 应 用 这 个 选 
择 器 ， 则 将 通过 检测 元 素 是 否 匹 配 该 选择 器 对 元 素 进 行 筛选 。 


请 思考 这 个 带 有 基本 的 谋 套 列表 的 页 面 : 


<ul> 
<1i>list item 1</1i> 
<1i>list item 2</1i> 
<1li class="third-item">list item 3</1i> 
<1i>list item 4</1i> 
<1i>list item 5</1i> 
</ul> 


如 果 我 们 从 第 三 个 项 目 开 始 ， 则 可 找到 该 元 素 之 间 的 同胞 元 素 : 


$('1i,.third-item').prevAll().css('background-color', 'red'); 


此 处 调用 的 结果 是 将 项 目 2 和 项 目 1 设置 为 红色 背景 。 由 于 我 们 未 应 用 选择 器 表达 式 ， 这 些 
前 面 的 元 素 很 自然 地 成 为 了 对 象 的 一 部 分 。 如 果 已 应 用 选择 器 ， 则 会 在 包含 元 素 之 前 ， 检 测 
这 些 元 素 是 否 匹 配 选 择 器 。 


jQuery 通 万 - prevUntil() 方法 


全 > 
实例 

查找 <dt id="term-2"> 之 前 的 同胞 元 素 ， 直 到 前 一 个 <dt>， 并 将 它们 设置 为 红色 。 同 时 ， 查 
找 <dt id="term-3"> 前 面 的 <dd> 同胞 ， 直 到 <dt id="term-1">， 并 把 它们 设置 为 蓝 色 文本 : 


$("#term-2").prevUntil("dt").css("background-color", "red"); 


var term1l = document.getElementById('term-1'); 
"dd").css("color", "green"); 


$("#term-3").prevUntil(termi, 


定义 和 用 法 


+ 大 4 晶 


prevUntil() 方法 获得 
DOM 节点 或 jQuery 对 象 匹配 的 元 素 。 


当前 匹配 元 素 集 合 中 每 个 元 素 的 前 面 的 同胞 元 素 ， 但 不 包括 被 选择 器 、 


语法 1 
.prevUntil(_selector_, _filter_) 
参数 描述 
selector ”可 选 。 字 符 串 值 ， 包 含 指 示 在 何 处 停止 匹配 前 方 同胞 元 素 的 选择 器 表达 式 。 
filter 可 选 。 字 符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 
语法 2 
.prevUntil(_element_, _filter_) 
参数 描述 
element ”可 选 。 指 示 在 何 处 停止 匹配 前 方 同胞 元 素 的 DOM 节点 或 jQuery 对 象 。 
filter 可 选 。 字 符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集 合 的 jQuery 对 象 ，.prevUntil() 方法 允许 我 们 在 DOM 树 中 搜 
索 这 些 元 素 前 面 的 同胞 元 素 ， 直 到 遇 到 被 选择 器 〈 传 递 到 方法 中 的 参数 ) 匹配 的 元 素 为 止 。 
返回 的 jQuery 新 对 象 包含 所 有 前 面 的 同胞 元 素 ， 但 不 包括 由 .prevUntil() 方法 规定 的 选择 器 
匹配 的 那个 元 素 ; 所 返回 元 素 的 顺序 是 从 最 近 的 同胞 元 素 到 最 远 的 那个 。 


如 果 不 匹 配 或 未 应 用 选择 器 ， 则 将 选区 所 有 前 面 的 同胞 元 素 ; 在 这 种 情况 下 ， 该 方法 选取 的 
元 素 与 未 提供 选择 器 时 的 .prevAll() 相同 。 

对 于 jQuery 1.6，DOM 节点 或 jQuery 对 象 ， 而 不 是 选择 器 ， 可 用 作 .prevUntil() 方法 的 第 一 
个 参数 。 

该 方法 接受 可 选 的 选择 器 表达 式 作 为 其 第 二 参数 。 如 果 应 用 这 个 参数 ， 则 将 通过 检测 元 素 是 
否 匹 配 该 选择 器 对 元 素 进 行 筛选 。 


jQuery 通 万 - siblings() 方法 


例 


查找 每 个 p 元 素 的 所 有 类 名 为 "selected" 的 所 有 同胞 元 素 : 


将 


$("p").siblings(".selected") 


定义 和 用 法 


siblings() 获得 匹配 集合 中 每 个 元 素 的 同胞 ， 通 过 选择 器 进行 筛选 是 可 选 的 。 


.Siblings(_selector_) 


参数 描述 
selector 字符 串 值 ， 包 含 用 于 匹配 元 素 的 选择 器 表达 式 。 


详细 说 明 


如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.siblings() 方法 允许 我 们 在 DOM 树 中 搜索 
这 些 元 素 的 同胞 元 素 ， 并 用 匹配 元 素 构造 一 个 新 的 jQuery 对 象 。 


该 方法 接受 可 选 的 选择 器 表达 式 ， 与 我 们 向 $() 国 数 中 传递 的 参数 类 型 相同 。 如 果 应 用 这 个 选 
择 器 ， 则 将 通过 检测 元 素 是 否 匹 配 该 选择 器 对 元 素 进 行 筛选 。 


请 思考 这 个 带 有 基本 的 谋 套 列表 的 页 面 : 


<ul> 
<1i>list item 1</1i> 
<1i>list item 2</1i> 
<11 class="third-item">list Item 3</1i> 
<1i>list item 4</1i> 
<1i>list item 5</1i> 
</ul> 


如 果 我 们 从 第 三 个 项 目 开 始 ， 则 可 找到 该 元 素 的 同胞 元 素 : 


$('1i,.third-item').siblings().css('background-color', 'red'); 


此 多 调用 的 结果 是 将 项 目 1、2、4 和 5 的 背景 设置 为 红色 。 设置 为 红色 背景 。 由 于 我 们 未 应 
用 选择 器 表达 式 ， 所 有 同胞 元 素 很 自然 地 成 为 了 对 象 的 一 部 分 。 如 果 已 应 用 选择 器 ， 则 只 会 
包含 四 个 列表 中 的 匹配 的 项 目 。 


原始 元 素 不 包含 在 同胞 元 素 中 ， 当 我 们 打算 找到 DOM 树 的 特定 层级 上 的 所 有 元 素 时 ， 记 住 一 
点 很 重要 。 


jQuery 通 历 - slice() 方法 


例 


选中 所 有 段落 ， 然 后 将 所 选 内 容 缩减 为 只 包含 第 一 和 第 二 个 段落 : 


将 


$("p").slice(0, 2).wrapInner(""); 
TE > 
slice() 把 匹配 元 素 集合 缩减 为 指定 的 指数 范围 的 子 集 。 


语法 


.Slice(_selector_,_end_ ) 


参数 描述 

sejector ”基于 0 的 整数 值 ， 指 示 开 始 选 取 元 素 的 位 置 。 如 果 是 负数 ， 则 指示 从 集合 末 
端 开始 的 偏 移 量 。 

a 基于 0 的 整数 值 ， 指 示 结 束 选 取 元 素 的 位 置 。 如 果 是 负数 ， 则 指示 从 集合 末 


端 开始 的 偏 移 量 。 如 果 省 略 ， 则 选取 范围 会 在 集合 末端 结束 。 


详细 说 明 
如 果 给 定 一 个 表示 DOM 元 素 集合 的 jQuery 对 象 ，.slice() 方法 用 匹配 元 素 的 子 集 构造 一 个 新 


的 jQuery 对 象 。 已 应 用 的 index 参数 集合 中 其 中 一 个 元 素 的 位 置 ; 如 果 省 略 end 参数 ， 则 
index 之 后 的 所 有 的 所 有 元 素 都 会 包含 在 结果 中 。 


请 思考 这 个 带 有 简单 列表 的 页 面 : 


<ul> 
<l1i>list item 1</1i> 
<l1i>list item 2</1i> 
<l1i>list item 3</1i> 
<l1i>list item 4</1i> 
<l1i>list item 5</1i> 
</ul> 


我 们 可 以 向 列表 项 集合 应 用 该 方法 : 


$('1i').slice(2).css('background-color', 'red'); 


此 次 调用 的 结果 是 项 目 3、4 和 5 的 背景 被 设置 为 红色 。 请 注意 ， 已 应 用 的 index 参数 基于 
需 ， 引 用 的 是 jQuery 对 象 中 元 素 的 位 置 ， 而 非 DOM 树 中 的 。 


end 参数 允许 我 们 更 进一步 地 限制 选取 范围 。 上 比如 : 


$('1i').slice(2, 4).css('background-color', 'red'); 


现在 ， 只 有 项 目 3 和 4 会 被 选取 。 再 次 说 明 ，index 是 基于 霉 的 ; 范围 会 延伸 到 (但 不 包含 ) 
指定 的 index。 
负 的 指数 


jQuery 的 .slice() 方法 模仿 了 JavaScript 数组 对 象 的 .slice() 方法 。 它 所 模仿 的 特性 之 一 是 向 
start 或 end 参数 传递 负数 的 能 力 。 如 果 提 供 负数 ， 则 指示 的 是 从 集合 结尾 开始 的 一 个 位 置 ， 
而 非 从 开头 。 例 如 : 


$('1i').slice(-2, -1).css('background-color', 'red'); 


这 次 ， 只 有 列表 项 4 会 变 红 ， 这 是 因为 该 项 目 是 介 于 从 结尾 计数 的 二 (-2) 与 从 结尾 计数 的 一 
(-1) 的 之 间 的 范围 中 的 唯一 项 目 。 


jQuery 参考 手册 - 数据 
jQuery 数据 操作 函数 


这 些 方法 允许 我 们 将 指定 的 DOM 元 素 与 任意 数据 相关 联 。 


本 数 描述 
.clearQueue() 从 队列 中 删除 所 有 未 运行 的 项 目 。 
.datal() 存储 与 匹配 元 素 相关 的 任意 数据 。 
jQuery.datal() 存储 与 指定 元 素 相关 的 任意 数据 。 
.dequeue() 从 队列 最 前 端 移 除 一 个 队列 函数 ， 并 执行 它 。 
jQuery.dequeue() 从 队列 最 前 端 移 除 一 个 队列 函数 ， 并 执行 它 。 
jQuery.hasDatal() 存储 与 匹配 元 素 相关 的 任意 数据 。 
.queue() 显示 或 操作 匹配 元 素 所 执行 汞 数 的 队列 。 
jQuery.queue() 显示 或 操作 匹配 元 素 所 执行 本 数 的 队列 。 
-removeDatal() 移 除 之 前 存放 的 数据 。 
jQuery.removeDatal) 移 除 之 前 存放 的 数据 。 


参阅 


参考 手册 : jQuery 队列 控制 


jQuery 通 万 - clearQueue() 方法 


实例 
清空 队列 : 


$("div").clearQueue( ); 


Et ~ ~ 
clearQueue() 方法 从 序列 中 删除 仍 示 运行 的 所 有 项 目 。 
语法 

.ClearQueue(_queueName_) 

参数 描述 

queueName 可 选 。 字 符 串 值 ， 包 含 序列 的 名 称 。 默 认 是 fx, 标准 的 效果 序列 。 
详细 说 明 
当 调 用 .clearQueue() 方法 时 ， 序 列 中 未 被 执行 的 折 有 画 数 都 会 被 从 序列 中 删除 。 如 果 不 使 用 
参数 ， 则 .clearQueue() 从 fx (标准 效果 序列 ) 中 删除 剩余 的 函数 。 在 这 种 方式 中 ， 它 类 似 


于 .stop(true)。 不 过 ，.stop() 方法 只 用 于 动画 ， 而 .clearQueue() 也 可 用 于 删除 通过 .queue() 
方法 添加 到 通用 jQuery 序列 的 任何 函数 。 


jQuery 数据 - datal() 方法 


实例 
向 元 素 附 加 数据 ， 然 后 取 回 该 数据 


$("#btn1").click(function(){ 
$("div").data("greeting", "Hello World"); 


}); 

$("#btn2").click(function( ){ 
alert($("div").data("greeting")); 
}); 


定义 和 用 法 

data() 方法 向 被 选 元 素 附 加 数据 ， 或 者 从 被 选 元 素 获取 数据 。 
从 元 乘 返 回 数据 

从 被 选 元 素 中 返回 附加 的 数据 。 

语法 

$(_selector_).data(_name_) 


参数 描述 


可 选 。 规 定 要 取 回 的 数据 的 名 称 。 如 果 没 有 规定 名 称 ， 则 该 方法 将 以 对 象 的 形式 
从 元 素 中 返回 所 有 存储 的 数据 。 


narme 


同 元 素 附 加 数据 


向 被 选 元 素 附加 数据 。 
语法 


$(_selector_).data(_name_,_value ) 





参数 描述 
的 数据 的 名 称 。 
的 数据 的 值 。 


name 心 


value 心 


使 用 对 象 同 元 素 附 加 数据 


使 用 带 有 名 称 / 值 对 的 对 象 向 被 选 元 素 添加 数据 。 
语法 
$(_selector_).data(_object_) 


参数 描述 
object 必需 。 规 定 包含 名 称 / 值 对 的 对 象 。 


jQuery 数据 - jQuery.datal() 方法 


实例 
向 元 素 附 加 数据 ， 然 后 取 回 该 数据 


$("#btn1").click(function( ){ 
$("div").data("greeting", "Hello World"); 


}); 

$("#btn2").click(function( ){ 
alert($("div").data("greeting")); 
}); 


定义 和 用 法 
data() 方法 向 被 选 元 素 附 加 数据 ， 或 者 从 被 选 元 素 获 取 数 据 。 
注释 : 这 是 底层 级 的 方法 ; 使 用 .data() 更 加 方便 。 


从 元 素 返 回 数据 
从 被 选 元 素 中 返回 附加 的 数据 。 
语法 

$(_selector_) .data(_name_) 


参数 描述 


可 选 。 规 定 要 取 回 的 数据 的 名 称 。 如 果 没 有 规定 名 称 ， 则 该 方法 将 以 对 象 的 形式 
从 元 素 中 返回 所 有 存储 的 数据 。 


name 


同 元 素 附 加 数据 


向 被 选 元 素 附 加 数据 。 
语法 





$(_selector_).data(_name_,_value ) 


参数 描述 
的 数据 的 名 称 。 
的 数据 的 值 。 


name 心 


value 心 


使 用 对 象 同 元 素 附 加 数据 


使 用 带 有 名 称 / 值 对 的 对 象 向 被 选 元 素 添加 数据 。 
语法 
$(_selector_).data(_object_) 


参数 描述 
object 必需 。 规 定 包含 名 称 / 值 对 的 对 象 。 


jQuery 通 历 - dequeue() 方法 


实例 
使 用 dequeue() 终止 一 个 自 定 义 的 队列 函数 : 


$("div").queue(function () { 
$(this).toggleClass("red"); 

$(this).dequeue(); 

}); 


= 、 
dequeue() 方法 为 匹配 元 素 执 行 序 列 中 的 下 一 个 汞 数 。 
语法 

,dequeue(_queueName_) 


参数 描述 
queueName 可 选 。 字 符 串 值 ， 包 含 序列 的 名 称 。 默 认 是 fx, 标准 的 效果 序列 。 
详细 说 明 


当 调 用 .dequeue() 时 ， 会 从 序列 中 删除 下 一 个 画 数 ， 然 后 执行 它 。 该 范 数 反 过 来 会 (直接 或 
间接 地 ) 引发 对 .dequeue() 的 调用 ， 这 样 序 列 才 能 继续 下 去 。 


jQuery 通 万 - jQuery.dequeue() 方法 


实例 
使 用 dequeue() 终止 一 个 自 定 义 的 队列 画 数 : 


$("div").queue(function () { 
$(this).toggleClass("red"); 

$(this).dequeue(); 

}); 


tl ~ N 

dequeue() 方法 为 匹配 元 素 执 行 序 列 中 的 下 一 个 豆 数 。 
注释 : 这 是 底层 级 的 方法 ; 使 用 .dequeue() 更 加 方便 。 
语法 


,dequeue(_queueName_ ) 


参数 描述 
queueName 可 选 。 字 符 串 值 ， 包 含 序 列 的 名 称 。 默 认 是 fx, 标准 的 效果 序列 。 
详细 说 明 


当 调 用 .dequeue() 时 ， 会 从 序列 中 删除 下 一 个 范 数 ， 然 后 执行 它 。 该 范 数 反 过 来 会 (直接 或 
间接 地 ) 引发 对 .dequeue() 的 调用 ， 这 样 序 列 才能 继续 下 去 。 


jQuery 通 万 - hasDatal() 方法 


例 


在 元 素 上 设置 数据 ， 然 后 查看 hasData 的 结果 : 


将 


$(function( ){ 
var $p = jQuery("p"), p = $p[0]; 
$p.append(jQuery.hasData(p)+" "); /* false */ 
jQuery.data(p, "testing", 123); 
$p.append(jQuery.hasData(p)+" "); /* true */ 
jQuery .removeData(p, "testing"); 
$p.append(jQuery.hasData(p)+" "); /* false */ 

}); 


定义 和 用 法 
hasDatal() 方法 检测 元 素 是 否 拥 有 和 与 之 相关 的 任何 jQuery 数据 。 


语法 


jQuery .hasData(_element_) 


参数 描述 
element 可 选 。 需 要 检查 其 数据 的 DOM 元 素 。 
详细 说 明 


jQuery.hasDatal() 方法 检测 元 素 当 前 是 否 拥有 通过 使 用 jQuery.data() 设置 的 任何 值 。 如 果 没 
有 数据 与 元 素 相关 (根本 不 存在 数据 对 象 或 者 数据 对 象 为 空 ) ， 则 该 方法 返回 false ; 否则 返 
回 true。 


jQuery.hasData(element) 的 主要 优势 是 ， 在 不 存在 数据 对 象 的 情况 下 ， 不 会 创建 并 将 数据 对 
象 与 元 素 进行 关联 。 相 反 地 ，jQuery.data(element) 总 是 向 调用 者 返回 数据 对 象 ， 如 果 之 前 数 
据 对 象 不 存在 ， 则 会 创建 它 。 


jQuery 通 万 - queue() 方法 
例 


显示 队列 的 长 度 : 


将 


function showIt() { 
var n = div.queue("fx"); 
$("span").text( n.length ); 
setTimeout(showIt, 100); 


中 、 > 
queue() 方法 显示 或 操作 在 匹配 元 素 上 执行 的 辑 数 队列 。 
语法 

.queue(_queueName_) 


参数 描述 
queueName 可 选 。 字 符 串 值 ， 包 含 序 列 的 名 称 。 默 认 是 fx, 标准 的 效果 序列 。 


操作 队列 


queue() 方法 操作 在 匹配 元 素 上 执行 的 函数 队列 。 


.queue(_queueName_,_newQueue_ ) 


参数 描述 
queueName 可 选 。 字 符 串 值 ， 包 含 序 列 的 名 称 。 默 认 是 fx, 标准 的 效果 序列 。 


详细 说 明 


每 个 元 素 均 可 拥有 一 到 多 个 由 jQuery 添加 的 函 数 队列 。 在 大 多 数 应 用 程序 中 ， 只 使 用 一 个 队 
列 (名 为 x) 。 队 列 运行 在 元 素 上 异步 地 调用 动作 序列 ， 而 不 会 终止 程序 执行 。 典 型 例子 时 
调用 元 素 上 的 多 个 动画 方法 。 例 如 : 


$('#foo0').slideUp().fadeIn(); 


当 这 条 语句 执行 时 ， 元 素 会 立即 开始 其 滑动 动画 ， 但 是 淡 入 过 渡 被 置 于 fx 队列 ， 只 有 当 滑 动 
过 渡 完成 后 才 会 被 调用 。 


.queue() 方法 允许 我 们 直接 对 这 个 函数 队列 进行 操作 。 调 用 带 有 回调 函数 的 .queue() 方法 特 
别 有 用 ; 它 人 允许 我 们 在 队列 末端 放置 一 个 新 吏 数 。 


这 个 特性 与 动画 方法 提供 回调 本 数 类 似 ， 但 是 无 需 在 动画 执行 时 设置 回调 酌 数 。 


$( '#foo' ).SLideUp()， 

$( '#foo' ) ,queue(function() { 
alert('Animation complete.'); 
$(this).dequeue(); 

}); 


$('#foo0').slideUp(function() { 
alert('Animation complete.'); 


}); 


请 注意 ， 当 通过 .queue() 添加 西数 时 ， 我 们 应 当 确 保 最 终 调 用 了 .dequeue()， 这 样 下 一 个 排 
队 的 函数 才能 执行 。 


例子 1 
对 自 定义 丽 数 进行 队列 操作 : 


$(document.body).click(function () { 

$("div").show("slow"); 

$("div").animate({left:'+=200"'},2000); 

$("div").queue(function () { 
$(this).addClass("newcolor"); 
$(this).dequeue(); 

}); 

$("div").animate({left:"'-=200'},500); 

$("div").queue(function () { 
$(this).removeClass("newcolor"); 
$(this).dequeue(); 


}); 
$("div").slideUp(); 
}); 


例子 2 


设置 队列 数组 来 删除 队列 : 


$("#start").click(function () { 

$("div").show("slow"); 

$("div").animate({left:'+=200'},5000); 

$("div").queue(function () { 
$(this).addClass("newcolor"); 
$(this).dequeue(); 

}); 

$("div").animate({left:'-=200'},1500); 

$("div").queue(function () { 
$(this).removeClass("newcolor"); 
$(this).dequeue(); 


}); 
$("div").slideUp(); 
}); 


$("#stop").click(function () { 
$("div").queue("fx", []); 
$("div").stop(); 

}); 


jQuery 通 历 - jQuery.queue() 方法 


实例 
显示 队列 的 长 度 : 


function showIt() { 
var n = div.queue("fx"); 
$("span").text( n.length ); 
setTimeout(showIt, 100); 

} 


定义 和 用 法 
queue() 方法 显示 或 操作 在 匹配 元 素 上 执行 的 事 数 队列 。 
注释 : 这 是 底层 级 的 方法 ; 使 用 .queue() 更 加 方便 。 


语法 
.queue(_queueName_) 


参数 描述 
queueName 可 选 。 字 符 串 值 ， 包 含 序列 的 名 称 。 默 认 是 fx, 标准 的 效果 序列 。 


操作 队列 
queue() 方法 操作 在 匹配 元 素 上 执行 的 图 数 队 列 。 
语法 

.queue(_queueName_,_newQueue_ ) 


参数 描述 
queueName 可 选 。 字 符 捉 值 ， 包 含 序列 的 名 称 。 上 默认 是 fx, 标准 的 效果 序列 。 


详细 说 明 


每 个 元 素 均 可 拥有 一 到 多 个 由 jQuery 添加 的 函 数 队列 。 在 大 多 数 应 用 程序 中 ， 只 使 用 一 个 队 
列 (名 为 x) 。 队 列 运行 在 元 素 上 异步 地 调用 动作 序列 ， 而 不 会 终止 程序 执行 。 典 型 例子 时 
调用 元 素 上 的 多 个 动画 方法 。 例 如 : 


$('#foo0').slideUp().fadeIn(); 


当 这 条 语句 执行 时 ， 元 素 会 立即 开始 其 滑动 动画 ， 但 是 淡 入 过 渡 被 置 于 fx 队列 ， 只 有 当 滑 动 
过 渡 完成 后 才 会 被 调用 。 


.queue() 方法 允许 我 们 直接 对 这 个 函数 队列 进行 操作 。 调 用 带 有 回调 函数 的 .queue() 方法 特 
别 有 用 ; 它 人 允许 我 们 在 队列 末端 放置 一 个 新 吏 数 。 


这 个 特性 与 动画 方法 提供 回调 本 数 类 似 ， 但 是 无 需 在 动画 执行 时 设置 回调 酌 数 。 


$( '#foo' ).SLideUp()， 

$( '#foo' ) ,queue(function() { 
alert('Animation complete.'); 
$(this).dequeue(); 

}); 


$('#foo0').slideUp(function() { 
alert('Animation complete.'); 


}); 


请 注意 ， 当 通过 .queue() 添加 西数 时 ， 我 们 应 当 确 保 最 终 调 用 了 .dequeue()， 这 样 下 一 个 排 
队 的 函数 才能 执行 。 


例子 1 
对 自 定义 丽 数 进行 队列 操作 : 


$(document.body).click(function () { 

$("div").show("slow"); 

$("div").animate({left:'+=200"'},2000); 

$("div").queue(function () { 
$(this).addClass("newcolor"); 
$(this).dequeue(); 

}); 

$("div").animate({left:"'-=200'},500); 

$("div").queue(function () { 
$(this).removeClass("newcolor"); 
$(this).dequeue(); 


}); 
$("div").slideUp(); 
}); 


例子 2 


设置 队列 数组 来 删除 队列 : 


$("#start").click(function () { 

$("div").show("slow"); 

$("div").animate({left:'+=200'},5000); 

$("div").queue(function () { 
$(this).addClass("newcolor"); 
$(this).dequeue(); 

}); 

$("div").animate({left:'-=200'},1500); 

$("div").queue(function () { 
$(this).removeClass("newcolor"); 
$(this).dequeue(); 


}); 
$("div").slideUp(); 
}); 


$("#stop").click(function () { 
$("div").queue("fx", []); 
$("div").stop(); 

}); 


jQuery 数据 - removeDatal() 方法 


实例 
从 元 素 中 击 除 之 前 添加 的 数据 : 


$("#btn2").click(function( ){ 
$("div").removeData("greeting"); 
alert("Greeting is: " + $("div").data("greeting")); 


}); 


tl ~ > 

定义 和 用 法 

removeData() 方法 删除 之 前 通过 data() 方法 设置 的 数据 。 
语法 


$(_selector_).removeData(_name_) 


参数 描述 


可 选 。 规 定 要 删除 的 数据 的 名 称 。 如 果 没 有 规定 名 称 ， 该 方法 将 从 被 选 元 素 中 删 
除 所 有 已 存储 的 数据 。 


name 


jQuery 数据 - jQuery.removeDatal() 方法 


实例 
从 元 素 中 副 除 之 前 添加 的 数据 


$("#btn2").click(function( ){ 
$("div").removeData("greeting"); 
alert("Greeting is: " + $("div").data("greeting")); 


}); 


< 、 

定义 和 用 法 

removeData() 方法 删除 之 前 通过 data() 方法 设置 的 数据 。 
注释 : 这 是 底层 级 的 方法 ; 使 用 .removeData() 更 加 方便 。 
语法 


$(_Sselector_) .removeData(_name_) 


参数 描述 


可 选 。 规 定 要 删除 的 数据 的 名 称 。 如 果 没有 规定 名 称 ， 该 方法 将 从 被 选 元 素 中 删 
除 所 有 已 存储 的 数据 。 


name 


jQuery 参考 手册 - DOM 元 素 方 法 


jQuery DOM 元 素 方法 


轴 数 描述 
.get() 获得 由 选择 器 指定 的 DOM 元 素 。 
.index() 返回 指定 元 素 相 对 于 其 他 指定 元 素 的 index 位 置 。 
.Size() 返回 被 jQuery 选择 器 匹配 的 元 素 的 数量 。 


.toArray() 以 数组 的 形式 返回 jQuery 选择 器 匹配 的 元 素 。 


jQuery DOM 元 素 方 法 - get() 方法 


获得 第 一 个 p 元 素 的 名 称 和 值 : 


$("button").click(function(){ 
x=$("p").get(0); 
$("div").text(x.nodeName + ": " + x.innerHTML); 


Fj 
定义 和 用 法 
get() 方法 获得 由 选择 器 指定 的 DOM 元 素 。 


语法 


$(_selector_).get(_index_ ) 





参数 描述 


index 可 选 。 规 定 获 取 哪 个 匹配 元 素 (通过 index 编号 ) 。 


jQuery DOM 元 素 方 法 - index() 方法 


获得 第 一 个 p 元 素 的 名 称 和 值 : 


$("1i").click(function(){ 
alert($(this).index()); 


号- ~ Si 
index() 方法 返回 指定 元 素 相 对 于 其 他 指定 元 素 的 index 位 置 。 
这 些 元 素 可 通过 jQuery 选择 器 或 DOM 元 素来 指定 。 


注释 : 如 果 未 找到 元 素 ，index() 将 返回 -1。 

第 一 个 匹配 元 素 的 index， 相 对 于 同胞 元 素 
获得 第 一 个 匹配 元 素 相对 于 其 同胞 元 素 的 index 位 置 。 

语法 


$(_selector_).index() 


元 素 的 index， 相 对 于 选择 器 


获得 元 素 相对 于 选择 器 的 index 位 置 。 


该 元 素 可 以 通过 DOM 元 素 或 jQuery 选择 器 来 指定 。 
语法 


$(_selector_).index(_element_) 


W3School jQuery 参考 手册 


参数 描述 
element ”可 选 。 规 定 要 获得 index 位 置 的 元 素 。 可 以 是 DOM 元 素 或 jQuery 选择 器 。 


jQuery DOM 元 素 方 法 - index() 方法 250 


jQuery DOM 元 素 方 法 - size() 方法 


实例 
输出 被 jQuery 选择 器 匹配 的 元 素 的 数量 : 


$("button").click(function(){ 
alert($("1i").size()); 
}); 


定义 和 用 法 
size() 方法 返回 被 jQuery 选择 器 匹配 的 元 素 的 数量 。 
语法 


$(_selector_).size() 


jQuery DOM 元 素 方 法 - toArray() 方法 


实例 
将 li 元 素 转 换 为 数组 ， 然 后 输出 该 数组 元 素 的 innerHTML : 


$("button").click(function(){ 
x=$("1i").toArray() 
for (i=0;i<x.length;i++) 


{ 
alert(x[i].innerHTML); 
} 


}); 
ch 、 、 
toArray() 方法 以 数组 的 形式 返回 jQuery 选择 器 匹配 的 元 素 。 


语法 


$(_selector_).toArray() 


jQuery 参考 手册 - 核心 


jQuery 核心 西 效 


函数 描述 
jQuery() 受 一 个 字符 串 ， 其 中 包含 了 用 于 匹配 元 素 集合 的 CSS 选择 器 。 
jQuery.noConflict() 个 函数 将 变量 $ 的 控制 权 让 渡 给 第 一 个 实现 它 的 那个 库 。 


淋 


jQuery 核心 - jQuery() 方法 


实例 
找 出 所 有 属于 div 元 素 的 子 元 素 的 p 元 素 ， 然 后 设置 其 边框 属性 : 


$("div > p").css("border", "1ipx solid gray"); 


ch 、 、 
jQuery() 方法 接受 一 个 字符 串 ， 其 中 包含 了 用 于 匹配 元 素 集合 的 CSS 选择 器 。 
jQuery() 画 数 有 三 种 语法 : 


语法 1 

接受 一 个 字符 串 ， 其 中 包含 了 用 于 匹配 元 素 集合 的 CSS 选择 器 : 
jQuery(_selector_, [_context_]) 

详细 用 法 

语法 2 

使 用 原始 HTML 的 字符 串 来 创建 DOM 元 素 : 
jQuery(_html_,[_ownerDocument_]) 

详细 用 法 


洁 法 3 
绑 定 一 个 在 DOM 文档 裁 入 完成 后 执行 的 画 数 : 


jQuery( callback ) 


详细 用 法 


jQuery( selector, [ context ] ) 


该 语法 有 以 下 几 种 用 法 : 


用 法 1 : 设置 选择 器 环境 
语法 
jQuery(_selector ，[_context_] ) 
默认 情况 下 ， 选 择 器 从 文档 根部 对 DOM 进行 搜索 。 不 过 ， 可 以 为 $() 设置 可 选 的 context 参 
数 。 
例如 ， 如 果 我 们 希望 在 一 个 callback 中 搜索 一 个 元 素 ， 可 以 限定 下 面 的 搜索 : 
实例 


$("div.foo").click(function() { 
$("span", this).addclass("bar"); 
}); 


由 于 我 们 已 经 将 span 选择 器 限定 到 this 这 个 环境 中 ， 只 有 被 点 击 元 素 中 的 span 会 得 到 附加 
的 class。 


在 内 部 ， 选 择 器 环境 是 通过 .find() 方法 实现 的 ， 因 此 $("span", this) 等 价 于 
$(this).find("span")。 


jQuery 的 核心 功能 都 是 通过 这 个 函数 实现 的 。jQuery 中 的 一 切 都 基于 这 个 函数 ， 或 者 说 都 是 
在 以 某 种 方式 使 用 这 个 函数 。 这 个 函数 最 基本 的 用 法 就 是 向 它 传递 一 个 表达 式 (通常 由 CSS 
选择 器 组 成 ) ， 然 后 根据 这 个 表达 式 来 查找 所 有 匹配 的 元 素 。 


默认 情况 下 , 如 果 没 有 指定 context 参数 ，$() 将 在 当前 的 HTML document 中 查找 DOM 元 
素 ; 如 果 指 定 了 context 参数 ， 2 DOM 元 素 集 或 jQuery 对 象 ， 那 就 会 在 这 个 context 中 
查找 。 在 jQuery 1.3.2 以 后 ， 其 返回 的 元 素 顺 序 等 同 于 在 context 中 出 现 的 先后 顺序 。 


语法 


jQuery(_element_) 


图 数 允许 我 们 通过 4 使 用 以 其 他 方式 找到 的 DOM 元 素来 创建 jQuery 对 象 。 该 功能 通常 的 用 
> 对 已 经 通过 this 关键 字 传 递 到 callback 函数 的 元 素 调用 jQuery 的 方法 : 


实例 


$("div.foo").click(function() { 
$(this).slideUp(); 
}); 


此 例会 在 元 素 被 点 击 时 使 用 滑动 动画 对 其 进行 隐藏 。 由 于 义理 程序 接受 的 this 关键 词 中 的 被 
点 击 项 目 是 纯 的 DOM 元 素 ， 因 此 在 对 其 调用 jQuery 的 方法 之 前 ， 必 须 用 jQuery 对 象 包 装 该 
元 素 。 


这 个 画 数 也 可 以 接收 XML 文档 和 Window 对 象 ( 虽 然 它 们 不 是 DOM 元 素 ) 作为 有 效 的 参 
数 。 


当 XML 数据 从 Ajax 调用 中 返回 后 ， 我 们 可 以 使 用 $() 函数 通过 jQuery 对 象 包装 该 数据 。 一 
且 完 成 ， 我 们 就 可 以 使 用 .find() 和 其 他 DOM 通 历 方法 来 取 回 XML 结构 中 单个 元 素 。 


用 法 3 : 克隆 jQuery 对 象 
语法 
jQuery(_jQuery object_) 


当 以 参数 的 形式 向 $() 函数 传递 jQuery 对 象 后 ， 会 创建 一 个 该 对 象 的 副本 。 与 初始 对 象 一 
样 ， 新 的 jQuery 对 象 引 用 相同 的 DOM 元 素 。 


用 法 4 : 返回 空 的 集合 
语法 
jQuery() 


对 于 jQuery 1.4， 调 用 无 参数 的 jQuery() 方法 会 返回 空 的 jQuery 集合 。 在 之 前 版 本 的 jQuery 
中 ， 这 样 会 返回 包含 document 节点 的 集合 。 


jQuery( html, [ ownerDocument ] ) 
该 语法 有 以 下 几 种 用 法 : 


用 法 1 : 创建 新 的 元 素 


语法 


jQuery(_html_,[_ownerDocument_]) 


你 可 以 传递 一 个 手写 的 HTML 字符 串 ， 或 者 由 某 些 模 板 引擎 或 插件 创建 的 字符 串 ， 也 可 以 是 
通过 AJAX 加 载 过 来 的 字符 串 。 但 是 在 你 创建 input 元 素 的 时 会 有 限制 ， 可 以 参考 第 二 个 示 
例 。 


当然 这 个 字符 串 可 以 包含 斜 杠 (比如 一 个 图 像 地 址 )， 还 有 反 斜 枉 。 当 你 创建 单个 元 素 时 ， 请 
使 用 闭合 标签 或 XHTML 格式 。 例 如 ， 创 建 一 个 span ， 可 以 用 $("<span/>") 或 $("<span> 
</span>") ， 但 不 推荐 $("<span>")。 在 jQuery 中 ， 这 个 语法 等 同 于 
$(document.createElement("span"))。 


如 果 以 参数 的 形式 将 字符 串 传递 给 $()，jQuery 会 检查 字符 串 是 否 是 HTML (上 比如， 字符 串 
某 些 位 置 存在 标签 ) 。 如 果 不 是 ， 则 把 字符 串 解 释 为 选择 器 表达 式 ， 请 见 上 面 的 讲解 。 但 如 
果 字 符 串 是 HTML 片段 ， 则 jQuery 试图 创建 由 该 HTML 片段 描述 的 DOM 元 素 。 然 后 会 创建 
并 返回 一 个 引用 这 些 DOM 元 素 的 jQuery 对 象 : 


实例 


$("<p id="test">My <em>new</em> text</p>").appendTo("body"); 


如 果 HTML 片段 比 不 含 属性 的 简单 标签 更 复杂 ， 如 同上 面 例子 中 的 HTML， 那 么 元 素 实 际 的 
创建 过 程 是 由 浏览 器 的 innerHTML 机 制 完 成 的 。 具 体 地 讲 ，jQuery 会 创建 新 的 <div> 元 素 ， 
然后 为 传 入 的 HTML 片段 设置 元 素 的 innerHTML 属性 。 当 参数 只 是 简单 的 标签 ， 上 比如 $(" 
<img />") 或 $("<a></a>")，jQuery 会 通过 内 生 的 JavaScript createElement() 函数 来 创建 元 
素 。 


要 确保 跨 平 台 兼 容 性 ， 片 段 的 结构 必须 良好 。 能 够 包含 其 他 元 素 的 标签 必须 成 对 出 现 ( 带 有 
关闭 标签 ) 


$("<a href="http://jquery.com"></a>"); 
不 过 ，jQuery 也 允许 类 似 XML 的 标签 语法 : 
$("<a/>"); 


无 法 包含 其 他 元 素 的 标签 可 以 关闭 ， 也 可 以 不 关闭 : 


$("<img />"); 
$("<input>" 有 


用 法 2 : 设置 属性 和 事件 


语法 





jQuery(_htm]1_， props_) 


对 于 jQuery 1.4， 我 们 可 以 向 第 二 个 参数 传递 一 个 属性 映射 。 该 参数 接受 能 够 传递 给 .attr() 方 
法 的 属性 的 超 集 。 此 外 ， 可 以 传递 任意 的 事件 类 型 ， 并 可 以 调用 下 面 的 jQuery 方法 : val， 


css, html, text, data, width, height, or offset. 


注意 ，Internet Explorer 不 允许 你 创建 input 元 素 并 改变 其 类 型 ; 您 必须 使 用 例如 "<input 
type="checkbox" />" 来 规定 类 型 。 


实例 
创建 一 个 <input> 元 素 ， 同 时 设 定 type 属性 、 属 性 值 ， 以 及 一 些 事件 。 


$("<input>", { 
type: "text", 
val: "Test", 
focusin: function() { 
$(this).addClass("active"); 


focusout: function() { 
$(this).removeClass("active"); 


} 
}).appendTo("form"); 


jQuery( callback ) 


允许 你 绑 定 一 个 在 DOM 文档 载 入 完成 后 执行 的 函数 。 


该 图 数 的 作用 如 同 $(document).ready() 一 样 ， 只 不 过 用 这 个 函数 时 ， 需 要 把 页 面 中 所 有 需要 
在 DOM 加 载 完成 时 执行 的 其 他 $() 操作 符 都 包装 到 其 中 来 。 尽 管 从 技术 上 来 说 ， 这 个 函数 是 
可 链接 的 ， 但 真正 以 这 种 方式 链接 的 情况 并 不 多 。 


例子 
当 DOM 加 载 完成 后 ， 执 行 其 中 的 画 数 : 


$(function( ){ 
// 文档 就 绪 
}); 


jQuery 核心 - noConflict() 方法 


实例 
使 用 noConflict() 方法 为 jQuery 变量 规定 新 的 名 称 : 


var jq=$.noCconflict(); 


定义 和 用 法 

noConflict() 方法 让 渡 变 量 $ 的 jQuery 控制 权 。 

该 方法 释放 jQuery 对 $ 变量 的 控制 。 

该 方法 也 可 用 于 为 jQuery 变量 规定 新 的 自 定 义 名 称 。 

提示 : 在 其 他 JavaScript 库 为 其 画 数 使 用 $ 时 ， 该 方法 很 有 用 。 


语法 


jQuery,nocCconf1ict(_removeAl1_) 


参数 描述 
removeAll 布尔 值 。 指 示 是 否 人 允许 彻底 将 jQuery 变量 还 原 。 
说 明 


许多 JavaScript 库 使 用 $ 作为 函数 或 变量 名 ，jQuery 也 一 样 。 在 jQuery 中 ，$ 仅仅 是 
jQuery 的 别名 ， 因 此 即使 不 使 用 $ 也 能 保证 所 有 功能 性 。 假 如 我 们 需要 使 用 jQuery 之 外 的 另 
一 JavaScript 库 ， 我 们 可 以 通过 调用 $.noConflict() 向 该 库 返 回 控制 权 : 


<script type="text/javascript" src="other_1ib.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 


<script type="text/javascript"> 
$.noCconflict(); 
// 使 用 另 一 个 库 的 $ 的 代码 


</script> 


可 以 与 .ready() 方法 结合 起 来 使 用 ， 来 为 jQuery 对 象 起 别名 ， 这 项 技术 非常 有 效 : 


<script type="text/javascript" src="other_1ib.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$.noconflict(); 
jQuery(document).ready(function($) { 
// 使 用 jQuery $ 的 代码 


}); 
// 使 用 其 他 库 的 $ 的 代码 


</script> 


此 外 ， 通 过 向 该 方法 传递 参数 true， 我 们 可 以 将 $ 和 jQuery 的 控制 权 都 交还 给 原来 的 库 。 用 
之 前 请 考虑 清楚 ! 


这 是 相对 于 简单 的 noConflict 方法 更 极端 的 版 本 ， 因 为 这 将 完全 重新 定义 jQuery。 这 通常 用 
于 一 种 极端 的 情况 ， 比 如 你 想 要 将 jQuery 舱 入 一 个 高 度 冲突 的 环境 。 注 意 : 调用 此 方法 后 极 
有 可 能 导致 插件 失效 。 


实例 


例子 1 
将 $ 引用 的 对 象 映射 回 原始 的 对 象 : 


jQuery,nocConf1lict()， 
jQuery("div p").hide(); // 使 用 jQuery 


$("content").style.display = "none"; // 使 用 其 他 库 的 $( ) 


例子 2 


恢复 使 用 别名 $， 然 后 创建 并 执行 一 个 画 数 ， 在 这 个 画 数 的 作用 域 中 仍然 将 $ 作为 jQuery 的 
别名 来 使 用 。 在 这 个 范 数 中 ， 原 来 的 $ 对 象 是 无 效 的 。 这 个 贺 数 对 于 大 多 数 不 依 赖 于 其 他 库 
的 插件 都 十 分 有 效 : 


jQuery,nocConf1lict()， 
(function($) { 
$(function() { 
// 使 用 $ 作为 jQuery 别名 的 代码 
}); 
}) (jQuery); 
，// 其 他 用 $ 作为 别名 的 库 的 代码 


例子 3 


可 以 将 jQuery.noConflict() 与 简写 的 ready 结合 ， 使 代码 更 紧 凌 : 


jQuery,nocCconf1lict()(function( ){ 
// 使 用 jQuery 的 代码 
}); 


，// 其 他 库 使 用 $ 做 别名 的 代码 


例子 4 
创建 一 个 新 的 别名 用 以 在 接 下 来 的 库 中 使 用 jQuery 对 象 : 


var j = jQuery.noConflict(); 
j( div p").hide(); // 基于 jQuery 的 代码 


$("content" ) .style.display = "none"; // 基于 其 他 库 的 $() 代码 


例子 5 
完全 将 jQuery 移 到 一 个 新 的 命名 空间 : 


var dom = {}; 
dom.query = jQuery.noConflict(true); 


结果 : 


dom.query("div p").hide(); // 新 jQuery 的 代码 
$("content").style.display = "none"; // 另 一 个 库 $() 的 代码 


jQuery("div > p").hide(); // 另 一 个 版 本 jQuery 的 代码 


jQuery 参考 手册 - 属性 


jQuery 属性 
下 面 列 出 的 这 些 方 法 设置 或 返回 元 素 的 CSS 相关 属性 。 
属性 描述 
context 在 版 本 1.10 中 被 奔 用 。 包 含 传递 给 jQuery() 的 原始 上 下 文 。 
jquery 包含 jQuery 版 本 号 。 
jQuery.fx.interval ”改变 以 毫秒 计 的 动画 速率 。 
jQuery.fx.off 全 局 禁用 /启用 所 有 动画 。 


jQuery.support 表示 不 同 浏览 器 特性 或 漏洞 的 属性 集合 〈 用 于 jQuery 内 部 使 用 ) 。 
length 包含 jQuery 对 象 中 的 元 素数 目 。 


jQuery context 属性 


实例 
令 测 上 下 文 : 


$("div").append("<p>" + $("div").context + "</p>") 
.append("<p>" + $("div",document.body).context.nodeName + "</p>"); 


Et ~ N 
context 属性 在 jQuery version 1.10 中 被 弃 用 。 


context 属性 含有 被 传递 到 jQuery 的 原始 上 下 文 ， 可 能 是 DOM 节点 上 下 文 ， 如 果 未 传递 节 
点 ， 则 是 document 上 下 文 。 


语法 


context 


jQuery jquery 属性 


实例 
俞 出 当前 正在 运行 的 jQuery 版 本 : 


$("button").on("click",function(){ 
var version = $().jquery; 
alert("You are running jQuery version: " + version); 


}); 
定义 和 用 法 
jquery 属性 返回 的 字符 串 包含 jquery 的 版 本 号 。 
语法 


$().jquery 


jQuery jQuery.fx.interval 属性 
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实例 

以 较 少 的 帧 数 来 运行 <div> 元 素 的 动画 : 
$("#toggle").on("click",function(){ 


$("div").toggle(5000); 


$("#interval").on("click",function(){ 
jQuery .fx.interval = 500; 
}); 


1、 N 

定义 和 用 法 

jQuery.fx.interval 属性 用 于 改变 以 毫秒 计 的 动画 运行 速率 。 可 操作 该 属性 来 调整 动画 运行 的 每 
秒 帧 数 。 

默认 值 是 13 毫秒 。 该 属性 常用 于 修改 动画 运行 的 每 秒 帧 数 。 

降低 这 个 值 能 够 使 动画 在 更 快 的 浏览 器 中 运行 得 更 流畅 ， 但 这 么 做 也 行 会 影响 性 能 。 


提示 : 由 于 jQuery 使 用 一 个 全 局 的 间隔 时 间 ， 为 了 使 该 属性 生效 ， 动 画 应 该 不 在 运行 或 者 首 
先 停止 所 有 动画 。 


注释 : 该 属性 在 支持 requestAnimationFrame 属性 的 浏览 器 中 无 效 ， 上 比如 Google Chrome 
11。 


语法 
jQuery .fx.interval = _milliseconds_， 
属性 描述 


milliseconds 必需 。 规 定 以 毫秒 计 的 动画 运行 速率 。 默 认 是 13 毫秒 。 


jQuery jQuery.fx.off 属性 


实例 
切换 动画 开关 : 


$("#true").click(function(){ 
jQuery .fx.off = true,; 

}); 

$("#false").click(function(){ 


jQuery .fx.off = false; 

}); 

$("#toggle").click(function(){ 
$("div").toggle("slow"); 

}); 


tl ~ ~ 
jQuery.fx.off 属性 用 于 对 所 有 动画 进行 全 局 禁用 或 启用 。 


默认 值 是 false， 它 允许 动画 正常 运行 。 当 设置 为 true 时 ， 将 禁用 所 有 动画 方法 ， 这 样 
素 设 置 为 其 最 后 的 状态 ， 而 不 是 显示 效果 。 


提示 : 如 需 简化 代码 ， 可 以 使 用 $.fx.off 来 代替 jQuery.fx.off。 
语法 


jQuery .fx.off = truel|lfalse; 


属性 描述 
true 规定 应 该 禁用 动画 。 


false 默认 。 规 定 应 该 启用 动画 。 


jQuery jQuery.support 属性 


实例 


测试 浏览 器 是 否 能 创建 XMLHttpRequest 对 象 : 


Ww 


$(document ) ,ready(function(){ 
$("p").html("This browser can create XMLHttpRequest object: " + jQuery.support.ajax); 


}); 


回击 
1、 N 

jQuery.support 属性 包含 表示 不 同 浏 览 器 特性 或 漏洞 的 属性 集 。 

此 属性 主要 用 于 jQuery 的 内 部 使 用 。 


语法 
jQuery.support._propvalue_ 


属性 描述 


必需 。 规 定 要 测试 的 功能 。 这 些 测试 包括: ajax boxModel 
changeBubbles checkClone checkon cors cssFloat hrefNormalized 

propvalue htmlSserialize leadingwhitespace noCloneChecked noCloneEvent 
opacity ‘optDisabled ‘optSelected scriptEval() style 
submitBubbles tbody 


jQuery length 属性 


实例 
输出 <li> 元 素 的 数目 : 


$("button").click(function(){ 
alert($("1i").1length); 


定义 和 用 法 
length 属性 包含 jQuery 对 象 中 元 素 的 数目 。 
语法 


$(selector).length 


免责 声明 


W3School 提 供 的 内 容 仅 用 于 培训 。 我 们 不 保证 内 容 的 正确 性 。 通 过 使 用 本 站 内 容 随 之 而 来 的 
风险 与 本 站 无 关 。W3School 简 体 中 文 版 的 所 有 内 容 仅 供 测试 ， 对 任何 法 律 问题 及 风险 不 承担 
任何 责任 。 


